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What is WAP? 
And why should you be 
excited about it? 
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Take a tour of a major 


Start Here welcome to the world’s first @, 
desktop movie studio—designed to let you 
| create and edit Desktop Movies, or even host 
a website serving thousands of concurrent 
\ video streams—for less than £2,775 ex VAT 


x fas 
= = ey FireWire With built-in 


FireWire, you can connect a 


2 
rs 


ah; 


professional digital camcorder 
and transfer video in \ 
perfect digital quality, Or 

add high-speed peripherals ? 
like hard drives and 


CD-ROM drives. y | 


Final Cut Pro 4 complete 4 \ 


high-end digital video editing 


studio in a box, including special = ee = 
effects—at a fraction of the cost of = 
A _ other high-end 


Final Cut Pro 


G4 Chip with 

Velocity Engine 

the first desktop processor to reach 
supercomputer speeds of one 
gigaflop (one billion calculations — 
per second). Using six of Intel’s own 

lests, the SOOMHz G4 (with its 128- 

bit Velocity Engine) is twice as fast 

as the 800MHz Pentium IIL 


©2000 Apple Computer, Inc. All rights reserved. Apple. the 


10 and FireWire are trademarks of Apple Computer, Inc., registered in the US and other 


trademarks of intel Corporation Suggested retail price of be Power Mac G4 450MHz, 17-inch {pple Stucho Display and 


guration, excluding camera. 


new movie studio. 


Endless Storage 

Available DVD-RAM lets you am — 
archive up to 5.2GB of video = 
on a single disc. 


Ry 
~ 
3) Screaming Streaming 


Running QuickTime Streaming 
Server, your Power Mac G4 can 
host a website running thousands 
of concurrent video streams. 


Apple Cinema wid aS 
Display There's never ~ 
been a movie screen like this 

in history. The Apple Cinema 

Display gives you the brightest, 

clearest, most inspiring place 


XX 10 work—a stunning 22 inches 
© \ measured diagonally. 


Ultrafast Storage 
ATA/66 hard disk up to 27GB 
standard, internally expandable 
with up to three drives—so you 


| digital video. ? 
& RAGE 128 Pro Graphics V4 i 
Accelerator wit 16ue of ? @ of 

ey graphics memory, mounted in a 

ey me — St AGP 2X slot, for accelerated 


rendering of 2D/3D images. Think differ ent. 


tries. Apple Cinema Display, Final Cut Pro, Power Mac, 


QuickTime, Think different and Velocity Engine are trademarks of Apple Computer, Inc. Intel and Pentium are registered www. apple. coms uk 
! Cut Pro software. Prices quoted are for business users on 


nly and exclude VAT at 17.5%, Apple resellers are free to set their own prices. FIntel signal processing library performance tests. 
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The scoop on the latest design Get CA Specials delivered and Using the new chatroom features to Explore the possibilities of 
packages, including Macromedia save money into the bargain make a ‘virtual pub’ on the Web Macromedia’s hugely popular tool 
‘UltraDev’ and Adobe GoLive 5 and check out its major features 
; 29 42 
12 62 
The latest version of Macromedia's The eclectic crew who designed the 
Web design philosophy is often premier multimedia design tool is new Salad Cream site — and more Peculiar name, impressive design 
overlooked — but it’s the most aimed more than ever at the Web... house with a host of youth culture 
important task you ll face i 46 Websites to its name 
18 Adobe's Flash-compliant animation 66 
_.and you can win a copy of system is here. Say hello 
Nota cartoon duo, but a gob- Director 8 right here Create a Web game in Flash — with 
smacking Flash design team a miniscule download size — in this 
34 advanced tutorial 
Pe It's Wireless Application Protocol. 


Find out how we created the new 
Computer Arts Website 


A special offer when you subscribe 
to Computer Arts 


But what does that mean to you as a 
Web designer? 
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computer 


The Complete Guide 
to Global Computing 


‘|coretoar Bryce... Paint EMerts for 
Adobe, Wild about WAP, Internet 
Titre Flash Competition 


Phatoshog: Using paths 2, 
(Dreamweaver 3.8 Fireworks 3, Alien 
insect 2, DV effects: 


ERAN RT TENOR 


Zen and the art of Web design 


Buyer’s Guide 


Back issues 


Web Guide 


18 | Spooky and the Bandit 


“aye 


arts 


The definitive guide to art, design and technology 


Subscription hotline: {t} 01458 271108 
Customer services on {t] 01225 822 510 


fe} couk 
[t]01226 822 743 and ask for 
CD technical support 


{t] 01225 44 22 44 


Promotional feature 
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Netscape Online 


THE FREE INTERNET SERVICE IN 
ASSOCIATION WITH FUTURE PUBLISHING 


1 


computer ' 
Complete Web design package. To Renowned vector animation tool Tried the full package? Now try the S q i 7 i 
publish your site. sign up with that capable of amazing results latest version pe Anh. 


art, design and technology 


Fortune City absolutely free by The definitive guide to 
following instructions in the app a i - 


Complete Web design package. More than 100 exclusive new Flash 
yours for free symbols from the Sparkle 
Complete version of this innovative collection, yours for free 


design package that offers a 

familiar DTP-style interface 
Adobe's rival to Dreamweaver — 
and some might say its superior. 
Find out if you agree 


The most widely-used Web design 
software — discover why 


Demo of this excellent editor that is 
weil-suited to commercial sites 


4 Versatile Web graphics editing 
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Building Web pages the Freeway 


Constructing your own Website doesn't have to involve hours of HTML coding or buying 
expensive software — this month's cover CD comes with something rather helpful... 


On the disc 


Freeway is a Mac-only Website 
creation tool, with a 
QuarkXPress-style interface. On 
our coverdisc we have a full copy 
of version one for you to keep, 
plus a demo of version two. 
Version three should be available 
soon, for more information, check 


out [w] www.softpress.com. 


Check your ISP 


Before uploading your site, check 
with your ISP that there are no 
special requirements as regards 
naming conventions. This could 
save you lots of time later on... 


Workarounds 


Internet Explorer and Netscape 
Navigator don't always interpret 
HTML coding identically. What 
works in one might not work in 
the other, so be prepared to 
spend time finding a workaround. 


fi _ Site: ae 
| [1DOS File Names 


| 
| 
| 


Macintosh HD Desktop Folder :Web_Folder : 


First we need to create a new document. Select 

New from the File menu to bring up the 
Document Setup dialogue. Create a new document 
of your desired size and create a destination folder 
for your pages to be stored in. Your finished pages 
will be stored in this folder. 


4 | Freeway's toolbox includes tools for creating 
radio buttons and checkboxes as well as text 
area tools to create forms into which text can be 
entered and posted to a designated e-mail address. 
The ones you'll use most often are the GIF and 
HTML rectangle tools, but each is self-explanatory. 


Once we have the Master page ready, we can 

add links to and create the other pages of the 
site. Highlight a line of text which will become a link 
and select Hyperlink from the Edit menu. We want 
our untitled page to be the home page, so click the 
Existing Page radio button and navigate to the 
Untitled document. Create the rest of the links in 
the same way, but click the New Page radio button 
and name them appropriately. The pop-up menu 
next to it reads Master’, since that page is being 
used as the base for the new ones. 


iad This is the first page of your Website. This page 
is currently untitled, but if you look at the Site 
palette you will see that it resides within the folder 
you created earlier. The Tool palette, Inspector 
palette and Colours palette should appear above the 
Site palette. 


To ensure consistency across the site, create a 

Master page to carry all the objects we want to 
appear on every page. In the Site palette, click on 
the Master1 icon to commence editing the Master 
page. You can then rename the Master page (we've 
called it Master) in the Inspector palette. 


You can now use the Site palette to navigate 
to each page in turn and add the elements 
unique to that page. Here we've started adding text 
and graphics (imported into a GIF box) to build up a 
portfolio. Use the Preview command in the File 

menu to check how your page is looking. 


QwWeb Folder = 


{@) Web_Site 


Save this document as: 


(Freeway 1.0 Format 


It is important to save the document using the 
Save As command in the File menu. The 
Freeway document should be saved into the folder 

created in step 1 — we've named this one simply 
Web_Site. You will need the entire contents of the 
folder when it comes to publishing your site, so 
name and store everything correctly. 


G Use the GIF and HTML rectangle tools to place 
text and images on your page. If you want to 
use fonts of different faces and sizes, enter and 
format the text in a GIF box and Freeway will convert 
it to an image for you. Use the Colours palette to 
control the colour of your box and text, while 
Apple-clicking on a box enables you to resize it. 


i 


tt 
i 


9 | This is a preview of the page in Netscape 
Navigator. Freeway is versatile in that it 
enables you to add to the site as and when you 
want and has the facility for simple JavaScript 
rollovers and so on. Be sure to check your site in 
both Explorer and Navigator before uploading it. 
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Part 1: Create a Website with Trellix Web 


Be a Web Wizard with the full package featured on our coverdisc, which provides a 
quick and simple way to structure your own Website... 


08 | web design special 
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| When you start Tre/lix, you'll be offered a 
choice between getting stuck in and learning 
more about the software. Choose the Start With A 
Wizard option under the Start Working heading and 
click OK to continue. This way you can set up the 
framework of your site in moments. 


Von Tulse ne Sell eves eds Po es Sapo se 


4 | Trellix comes with a range of looks that you 
can apply to your Website. The wizard will 
preview any look that you highlight. We tried a few 
but settled on Starfish2 in the end. Registered users 
of the software can download even more looks from 
the Trellix Website. 


Now you can swap round the order of the 

pages in your Website's structure. Highlight a 
page and you'll see which of the four things you can 
do to it: move it up, move it down, turn it into a 
main page or turn it into a sub-page. 


250 tym of ste co yn web ear 


plan to construct. Trellix provides a choice of 
four types — Business, Personal, Photo Album or 
Organization. We're going to build our own 
personal Website, so highlight Personal and click 
Next to proceed. 


to be in your Website. Simply tick the boxes 
besides the pages you want included as sub-pages 
of your home page. You can even change the 
names of your pages by editing the Page Title box. 


8 | Next you can add text to as many of the pages 
in your structure as you like. Here we're adding 
some text to the home page. Simply highlight the 
page in the list on the left and enter the text you 
want in the box on the right. 


The first job is to choose the type of site you 


The next step is to choose the pages you want 


Trellis (Wim you ste, ard F you Me, ack an image Ge tage to pw heme Dah. 


1 Some none 


2 Nene your site 
sard add an nage 
3 Come ae 


4 Syn saws 
or oes 


S Amadeo gy 
om 


Now provide some basic personal details for 

your site's home page by typing in your name 
and e-mail address. If you've got a picture of 
yourself as a GIF, JPEG or PNG file, you can use the 
Browse... button to locate it for inclusion in your 
home page. 


ih 0 ach aA bande $s hare, You ma wehate 


vou te, 
change the ‘tite the ahd cheese 0 faire trem 
Gata peu petovenone tha rober w eslean pee 


6 | You can also use this part of the wizard to add 
more sub-pages to the first section of your site. 
Tick the sub-page box and then type a name for 
your new sub-page in the Page Title box. Notice 
where this new page is placed in the site map. 


Would you like to add any Web Gems to your home page? 
© Iretude a ‘Trella Web Lage’ Gem 
© inehade. ind-t Gin Tracking! Ger 


ton yoo tay 
2 aH ape 


This last step is optional but Tre/lix comes with 


some extra goodies that you can include in 


your site. Simply tick which of these so-called Web 
Gems you want and click Finish to complete setting 
up your Website's structure. 


Part 2: Complete your Website 


Add the finishing touches to your site with more text, links, pictures and even 


new pages -— Trellix Web Wizard makes it easy... 


Trellinweb) 


congratulations! learn more 


‘Youve completed the Web Wieard and youre well 
‘on your way te publishing your se, You can new 
© Continue constructing your ste. 


‘Adhd mors test, wages, Inks, and other 
contort lo complete your ste 


woud you Ihe mere eFormatian? 


| 

| © Gunded tour 
| Experience the fi power of 
| Tlie We, (about RO mens) 
| © Ait About Pulistang to the Web 
eens 
| 
| 


‘can you publ your Own ste? 
(about 19 mewtes) 


a: © Preview Pulls your ste to the me 


Ore: Rhap Publ you review and pubsh 
what you just created (IF you haven 
dgned up wth 4 web hosting service, yout 
(pet your hanks now.) 


Once you've finished using the wizard to 

structure your Website, you can choose the 
Continue option to more elements to each 
individual page. Tre/lix provides tools to help you 
add more text, images and hypertext links to your 
site. You can even create whole new pages. 


4 | Trellix goes straight to your new page so that 
you can start editing it (it also adds a link here 
from the home page). Next we're going to change 
the heading to something more exciting. Double- 
click on the words Favourite Links and edit them to 
read My Cool Links Collection. 


Bevan oEy het otre | Lard rage ca in poet te. 
— Fs Ways 


Now position the cursor before the link you've 

just added and click on the Add Image button 
in the toolbar. Locate the image file you wish to 
insert then tick the Limit image size (in pixels) to 
checkbox, enter the dimensions you wish to apply 
and click Open. 


John Doe 


Al About, q 

My Betwoe 

My Hetbies, 

Spptast Us Yeisen s9 my Wab. pte, Preare feel hes to cnplard me by eset at 
Ahn donde ste £9.00 U youve ike 18 koow mare adouLene ot Dis alae 


(iteh te receive omall: 
wiven this web site Is upslated 


ain 


2 | It's worth taking a few moments to familiarise 
yourself with the layout of Tre/lix. You'll find 
the usual selection of menus at the top of the 
screen and below that are the main toolbars, a 
map of your site and an editable layout of the 
currently selected page. 


> “ 
Ad6 Test Add image Web Gems Unto 
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My Cool Links Collection 


Welcome tomy amazing collection of wacky Web fink 
if you've got any suggestions for new ones 


5 | Now click in the space below the heading so 
that we can type some body text. Use the 
formatting toolbar to select the font, size, style and 
alignment you wish to use and then type in an 
introductory paragraph of text. 


Weicome to my amazing collection of wacky| 
if you've got any Suggestions for new ones 


‘Type text or insert image here 


i - of & t: 
Eine iaFuture Sublishing - Home of Comouter Art 


Continue to add new elements to your site 

until you are satisfied. It's a good idea to save 
your work as you go along. You can also preview 
what your site will look like in a browser by selecting 
the Preview Website... option from the File menu. 


Apttael Me Ox PIUeLA 
he oe ony. bebe, 


Ciiek to recelve email 
wien this web site bs updated 


g First we're going to add a new sub-page of the 
home page. Check the home page is 
highlighted in the map and click on the Add Page 
button in the toolbar. Now type Favourite Links in 
the Title text box of the Insert New Page dialog box 
and click OK. 


Welcome to my amazing collection of wacky 
if you've gor any suggestions for new ones 


iain Publishing = Home of Computer Act 


Type text or insert image here 
{optronal) 


Start a new line and choose the Create Link to 

URL of File... option from the Link menu. Type 
the Web address in the second text box in the Link 
Properties dialog box and then enter the text you 
want to appear for this link in the Displaying text box. 


A useful last check is to use Trel/lix's built in 

spelling checker to make sure you haven't 
made any embarrassing errors. To do this, simply 
click on the Spelling button in the toolbar, make sure 
the All pages option is selected and click Start. 
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Macromedia UltraD 


Back-office tool for Web applications unveiled 


acromedia is to launch a new databases to a site while viewing live data in 
A product codenamed UltraDev, a the workspace. 
re development tool based on 
i. Dreamweaver’s core 
architecture. UltraDev enables programmers The back end 


to quickly create Web applications using ASP 
JSP CFML and more, and connect existing 


Unlike Dreamweaver, which is designed for 
creating HTML Websites, UltraDev is aimed 
at ‘back-end’ 
development — 
interfacing, querying 
and generally 
exploiting databases, 
then manipulating all 
the data and 
presenting it to the 
‘visual’ end of a 
Website. Database- 


“UltraDev enables programmers to 
connect databases to a site” 


Tranchise 
iranchises franchise search ~~ 


a 
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</TABLE> 
</TD> 
</TR> 
<TR 
<TD VALIGH-TOP ALIGH-LEFT> 
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=( 
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<TD VALIGN=TOP COLSPAN=2 WIDTH=119><im 
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<img src="images/nav_blackbox. gif” w: 


© </FORM> 
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UltraDev is targeted at 
‘back-end’ development, 
as database-driven 
Websites increase in 


‘Tanna 


Apple's FREE seminars 


Discover the latest in compression and streaming for 


the best from this technology. The focus 
is on how to prepare and deliver 
streaming media on the Internet. 


Macromedia's UltraDev is intended to replace 
Drumbeat, although owners will be able to upgrade. 


driven sites are becoming increasingly 
common as, once they're set up, they enable 
data to be quickly altered and interrogated in 
an orderly way. 

UltraDev takes such development one step 
further by providing instant feedback on your 
database application and enabling changes 
to be made in place, complete with visual and 
source editing. 


Supported servers 


UltraDev supports ASP 2.0, Cold Fusion or 
JSP 1.0 servers including Microsoft IIS, 
Allaire Cold Fusion and Netscape Enterprise 
Server. Meanwhile supported database 
formats include ODBC, JDBC and ADO- 
based systems such as Oracle, Sybase, 
Microsoft SQL and Access. 

Although UltraDevis intended to replace 
Drumbeat as Macromedia’s product for Web 
application development, registered 
Drumbeat users will be able to upgrade for a 
reduced price. You will also be able to open 
and edit existing published Drumbeatfiles 
within UltraDev. 


featured, allowing you to learn how to 
prepare and deliver quality content. 
The topics will include capture and 


Web broadcasts 


esktop Movies combine the 
full sensory experience of 
video with the affordability 


and ease of use of desktop computing. 
Now video professionals, content 
creators, designers, corporate 
departments, or anyone with a message 
to communicate can develop highly 


effective marketing and training 
materials for delivery on the Web. 
Apple — with partners Macromedia, 
Terran Interactive, Akamai, Pinnacle 
Systems, Sony Broadcast & 
Professional and Sorenson Media — is 
delivering free Desktop Movies for the 
Web Seminars in June to help you get 


lf your business is news, corporate 
communications, sales, education, or 
entertainment, your organisation will 
soon be faced with the need to deliver 
video content — either over an intranet 
or the Internet. The Desktop Movies for 
the Web seminars will help you 
understand how to tackle this exciting 
new frontier. High-speed QuickTime 
compression and broadcast tools will be 


edit, video compression for the Internet, 
authoring Web pages using QuickTime 
content, delivery, bandwidth and 


equipment for broadcast. 


menu items and so on — much like 
Macromedia’s Dreamweaver. 

The improved Site Builder enables you to 
almost effortlessly alter a site’s relationships, 
for instance making a child page a parent 
without having to manually change all the 
links. A Site Reporting capability pinpoints 
slow-loading pages and generates multiple 
browser-friendly versions of your site, among 


Adobe GoLive 5 


Adobe's rival to Dreamweaver gathers pace 


by the program, customisability and better 
site management capabilities. 


y the time you read this, the latest 
version of Adobe's increasingly 


(i ; 


popular Web builder GoLive As before, GoLive offers both WYSIWYG other things. 
‘f should be available. Release 5.0 and development environments, the latter 
promises better stability, cleaner code enabling hand-editing of the code. However : 
untouched GoLive no longer reformats inserted code, Database friendly 


GoLive so 


Professional Web authoring and site management 


which sometimes resulted in broken 
HTML, but instead simply ignores it 
and assumes that you know what 
you're doing. 


Graphic editing 


GoLive also now offers the 
capability to re-edit optimised 
graphics simply by double-clicking, 
which reopens the file in the native 
editor and resaves it once you've 
finished. What's more, the 
Photoshop Web compression engine 
is built-in, enabling you to optimise 
PSD files on the fly. 

Crucially the program is also now 
customisable via the included 
JavaScript SDK, which means you 
can (with just a bit of programming 


Finally, but importantly, GoLive has a 
dynamic link capability to connect to ODBC- 
compliant databases — as well as the 
customary integration with Adobe's other 
graphics packages. 

Adobe is certainly playing the catch-up 
game for Web design software as compared 
to Macromedia's ubiquitous Dreamweaver 
and Fireworks. It originally purchased the 
well-regarded Cyberstudio 3, as it was then 
called, from GoLive (the company) and 
quickly followed up with a cross-platform 
version 4. V5 is the first full Adobe build — 
and it definitely looks like it’s set to be 
something special. 

You can read a full review of Adobe GoLive 
Sin the July issue of Computer Arts, on sale 
from 14 June. 


Adobe GoLive 5.0 should be available this month for PC 
and Mac, price TBA. For more info contact Adobe on 


{t]0208 606 4001 or [w] www.adobe.co.uk. 
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4issuesfree arts 


{0808.00 } 


; Zz For ful tfetalle on now io enter, you need the 


‘you've already rea it, clack here te enter the compet 


Illustration: Magictorch. Telephone: 01273 202147 


Zen and the Art of We 


You might be handy with Photoshop, 
but it doesn't mean you can create a 
dazzling Website. So what makes a 
great Web designer? 


| here’s never been a better 
time to start designing 

ii Websites. In five years, the 

J Internet has shifted from 
being the preserve of computer geeks 
to the new medium no one can afford to 
be without. Britain has witnessed 
explosive growth and acceptance of the 
Net — you can't open a magazine or 
switch on the telly these days without 
being accosted by Web addresses. 

Hand in hand with this popularity has 
come a huge demand for Web designers 
who can produce sites to satisfy a whole 
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spectrum of weird and wonderful 
design briefs. If you've been considering 
taking the plunge into Web design, now 
is the time to do it. 

If you already have a background in 
computer aided design and are familiar 
with packages like Photoshop, 
FreeHand and Illustrator, then you have 
an advantage when it comes to learning 
Web design. It means you're already 
familiar with generating and 
manipulating graphics, as well as 
understanding the importance of colour 
usage and font application. But 


producing graphics for the Web is a 
whole different kettle of fish to 
producing them for print — and graphics 
are only a part of the equation of 
realising a successful Website. 

The key for designers coming fresh to 
Web design is to avoid bringing with 
them the dogma of their previous 
professions. Good Web design is about 
flexibility — it's about relinquishing 
pixel perfect control of a design's 
appearance and concentrating instead 
on functionality. Instead of thinking 
simply about how a Website looks, a 
Web designer has to think about how it 
works too — how a user gets around the 
site, how they find what they want easily, 
and to ensure that the site is as intuitive 
as possible. 


Navigation aid 
Web design is 3D because it’s 
fundamentally about presenting a 


Design 


collection of information that the user 
can move around in, rather than merely 
being visually attractive. Of course, the 
best sites manage to be both, but 
functionality should always take 
precedence over form. You only have to 
look at the most popular site on the 
Web, Yahoo! (www.yahoo.com) to see 
such functionality in action. The 
appearance would probably make most 
traditional designers weep, but the 
design is like that precisely because it’s 
the most efficient way of letting people 
get the info they want. 

Hand in hand with the 3D nature of 
Web design come the considerations of 
bandwidth and platforms. The Web isn't 
nicknamed the World Wide Wait for 
nothing — all of us have suffered the 
annoyance of slow loading Websites, 
and more often than not have given up 
and gone elsewhere. Web designers 
have to ensure that whatever they do, it 


downloads fast — otherwise you'll lose 
most of your audience. 

Equally, Web pages are seen on lots 
of different platforms — Windows, Mac 
and Linux, using /nternet Explorer and 
Netscape Navigator, to name just the 
major contenders. Ideally, Websites 
have to work on all these different 
platforms so as to ensure the maximum 
amount of users. If the page loads and 
everything goes pear-shaped, the users 
will disappear to somewhere that does 
work on their machine. 


Screen test 


Similarly, most designers are used to 
working with big monitors running at 
1024 resolution or higher — but don't 
forget most ordinary Joes access the 
Web with a Windows machine running 
at 640x480 or 800x600. Therefore the 
sites you design must be viewable in 
those resolutions as well as your own. 
Of course, not all of us can afford a 
Mac and PC to test our sites on — but 
we can ensure that sites work OK in 
both the major browsers and at different 


resolutions. More importantly, at least 
being aware that a site will be seen on 
other browsers and platforms other 
than the one you design it on will help in 
designing it for everyone to see. 

In short, if you’re coming fresh to 
designing for the Web, don't try and 
shoehorn Web pages into what you 
think is good design for other media. 
Huge images, cryptic navigation, slow 
loading pages, sites that only work at a 
resolution of 1024 or higher — these are 
all the hallmarks of designers trying to 
transfer design tenets from other media 
onto the Web — and making a right 
mess of it. 

The key to good Web design, as with 
most things, is to go back to basics. It’s 
certainly a good idea to familiarise 
yourself with a Web editing program 
like Macromedia’s Dreamweaver or 
Adobe's GoLive, but don't just stop 
there. Roll up your sleeves and learna 
bit about HTML — Hyper Text Markup 
Language — itself, the language that 
holds Web pages together. HTML is 
super simple to pick up, armed with a 
good book like Laura Lemay’s Teach 


Yourself Web Publishing with HTML 4 in 
21 Days (ISBN: 0672317257), you'll 
have it sussed in an afternoon. 


Under the bonnet 


More importantly, once you've got your 
head round HTML, you'll start planning 
out Web pages in HTML terms rather 


than purely visual terms. Then you can 
start analysing Web pages you like by 
using the View Source function and 
seeing how the designer put it together. 
This means you're considering a site in 
terms of how it functions as well as how 
it appears. Looking under the bonnet of 
sites you like is an essential part of 


Flashis evil: read one man’s rather educated rant against sites using Shockwave. 
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Go and see what they say about Web design. Then 
pinch it to use for your own nefarious purposes... 


com 
AWeb community of Web designers. Despite the site being a 


perfect example of why you shouldn't use frames, it’s full of stuff 
about the complexities of Web design, and has a dead useful 


discussion mailing list which you can sign up to for free. 


onkey.com 
One of the best all round Web design advice sites. Webmonkey 
features stacks of tutorials about how to get virtually anything 


done, plus lots of thoughtful stuff about what the Web is and how to 


design better for it. 


The site to accompany David Seigel’s best selling Creating Killer 
Websites book, with lots about making the transference from print 
design to Web design. It’s basically an extended plug for the book, 
but it’s useful nonetheless. 


Worth taking a peek for ideas and design inspiration, although it 
soon becomes obvious that the ‘designer’ Website aesthetic is 


becoming a bit overused. 


The Website of Web usability guru Jakob Neilsen. Packed with 
useful articles about how people browse sites, what they like and 


what they don't like. Essential reading for anyone wanting to get the 


widest possible audience to their site. 


A fabulous directory of generally cool sites with high design values. 


net od of ordering a 
$, but also it's 


Imagine how — you'd be if every 


“== time you booted up your computer the 


desktop icons were in a completely 
different place from last time. So it is 
with Websites with weird and wonderful 
navigation — they confuse and 
disorientate the user, so giving them 
less impetus to explore the site. 

This is the main reason why frames 
have fallen from grace in recent times. 
While they allow initially easier 


WILD FEED. TV 


Home | Introduction | Gallery | NBC vs WFTY | Links | Feedback 


onscreen atalltimes,theymake = 
bookmarking individual pages within 
the site impossible and also make the 
back button go awry. Most sites simply 
position the navigation bar on each 
individual page, so keeping it available 

at all times and allowing for easy 
bookmarking. 


Make it easy 


Remember that surfing- Websites is not 

a linear experience, here people enter. 
at the front, go through the middle and 
leave at the exit. People can arrive and 
exit from your site via any page. Don't 
try and force them to do otherwise ~ of 
ensure they have that navigation bar 
against which to orientate themselves 
and know they've arrived at a different 
site. If you present it coherently, they 
may well start exploring the rest of the 
site. In short, if you're catering to the 
widest possible range of Web users, 
make it easy for them. Of course, if 
you're not out to attract everyone to 


There's a reason why left hand 
navigation is ubiquitous — it's 
what surfers are used to 


Go 


click for enhanced site 


If you're not properly kitted out, a stern 
warning about having the wrong plug-in 
greets you at The Remedi Project. 


Yahoo — the most popular site on the Net. And 
yes, it is designed to look like that... 


Shockwave.com: a fantastic site that showcases the use of, you guessed it, Shockwave. 
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It'sa giant leap! 


ed Net access is finally here with 
en World. 


Balthaser Web design company: one of the 
most impressive Shockwave demonstrations. 


Most people on the Web have no 
interest in design — it's a tool and 
if it goes wrong they'll blame you 


your site, then you can design more to 
the audience you have in mind. There 
are some fantastic sites like the Remedi 
Project [w] www.theremediproject.com 
and Balthaser [w] www.balthaser.com 
that exploit the uses of Shockwave to 
the full. These are bandwidth intensive 
sites that are designed for high end 
users — that is, people who underst: 
the Web and its many idiosyncrasies 
and always have the latest browser and 
plug-in versions. 
Remember that the vast majority of 
eople using the Web have no interest 
he Internet per se, justas they don't 


_care about the computer that they use, _ 


at Work, Both are just tools to get things © 
done, and if it goes wrong, they'll blame 
your Website rather than their own lack 
of knowledge. 


Flash is evil? 


As such, it’s important to only use these 
elements where they're needed. Too 
often Web designers get carried away 
with the impulse to add dynamism to 
their pages with wholly inappropriate 
Shockwave intros to their site or 
animations. These might be mildly 
entertaining the first time but they soon 
get annoying, especially if they stop the 
user getting to the information. Have 
the humility to look long and hard at 
your Website designs and ask yourself, 
‘Would | actually use this site?’. It’s also 
worth reading the personal but 
pertinent meditation Flash Is Evil at [w] 
www.dack.com/web/flash_evil.html 

Plug-ins are great if they deliver 
content on demand — that is, if the user 
asks to see the animation or the video 
clip, rather than it being thrust upon 
them — Shockwave.com and 
wildfeedtv.com are two good examples 
of this. Deliver the content that your 
users want to see, not what you think 
they should see. Unless you’re building 
a site for a niche audience, make sure 


a 


o> 


people can get at the content without 
needing plug-ins. For more about 
designing with and without plug-ins, 
see the Investigation in issue 39 of 
Computer Arts. See page 93 to obtain 
back issues. 

While Shockwave and other plug-ins 
such as RealAudio, Quicktime and Java 
applets are commonly considered 
cutting edge Web design, they’re 
actually blunting it. The real cutting 
edge is to be found in designers who 
can produce pages that are 5k or less in 
total download size, as the recent 
massive response to the on-line design 


competition at [w] www.sylloge.com/5k 


showed. The need for tiny file sizes is 
becoming increasingly important as 
more and more sites become database 
driven, especially e-commerce 
Websites. Because databases take a 
while to display all the information 
asked for, it’s absolutely critical that the 
Web page which contains that 
information loads fast. 

With high bandwidth ADSL Net 
access now about to happen in the UK 
with BT’s Open World scheme — see 
[w] www.btopenworld.com for more 
information, perhaps designers’ worries 
about file sizes, bandwidth and 
download speeds are finally over? 
Unfortunately not. As people get used 
to having greater bandwidth, they'll be 
expecting even more from the Web — 
perhaps not in terms of sites having 
more bells and whistles, but in being 
able to access several Websites 
simultaneously and expecting them all 
to download instantly. 


The big screen 


Certainly the high end niche sites will 
be able to become even more radical 
with full screen streaming video and the 
like, but that won't change the 
fundamental point that not all sites 
require such multimedia. Why insert a 


sone 
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Five sites that break cardinal rules of Website design. 
Read ‘em and weep... 


Diverse's otherwise lovely site is marred by its front page 
demanding that you have the Real Audio and Flash plug-ins to see 
their intro movie. It’s unnecessary as the site works fine without 


either plug-in, so why scare off users? 


with small screens, half of their monitor will be taken up at all 
times with the horribly oversized logo and drop down navigation, 


leaving very little room to display the goods for sale. 


Pop-up windows and slow loading pages make Boo's on-line 
shopping experience a confusing mess of a Website. Far too much 


effort put into trying to impress users with a cool site rather than 


getting on with showing them their streetwear. 


} Areal Shockwave shocker, this one. Aimed at complete beginners 
on the Web, Moonfruit seeks to help people build their first 
Websites using pre-built Flash bits. It takes an age to do anything 


on the site because you have to wait for each stage to load. 


Even more awful than Moonfruit, First Active's financial services 
site is built entirely in Shockwave and makes you sit drumming 


your fingers for several minutes before anything happens. When it 


does, it’s not worth it. 


Please standby. 


@ od ® 


OK, the judging is not quite done. We apologize 
for the delay; the results will be a few days late. 


® > 4 @ 
You can still play: 
® @ @ 
A different 5k entry every time. 


(Up to a certain point anyway; 
there are only so many entries.) 


PULL HANDLE AND wine 


For those of you without JavaScript or with a taste for more sober 
and serious presentation, s 
(117K — my apologies; there were many entries). 


Design a Web page under 5k in size? Designers took up the challenge at [w] www.sylloge.com/5k 
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The UK’s 
best-selling 
DTP magazine! 


pointless Shockwave animation when are: can it be seen anywhere by 

* you can ensure the whole front page of anyone #lf yeu can create a Website that 
your Website appears in one second | at least acknowledges the issues of 
flat? This increased bandwidth will be | accessibility, usability, download 


exploited by the best Websites ona | speed, platform and resolution, then 

user demand basis, but more half the battle’s been won. 

importantly, it will also-be used for the Fi 

simple’ purpose of making the Internet Starting from scratch ewe ian faaits  eae 


we know actually work far faster than it Designers who can transfer their 


a currently does. | relevant skills from other disciplines to 
& In conclusion, good Web Web design while at the same time 
~ design, like any discipline, recognising that they have to start from 
is something that has to scratch will become the people mostin 
be practised and demand over the next few years. By 
mastered, While it’s being able to understand and switch 
aa easytopickupthe | between ‘old’ and ‘new’ media, these 
rudiments of designers will be in the rare position of 
putting a Web page being able to produce projects that 
together, creating a | work across and exploit their 
cohesive, easy to use site is a different | differences, rather than being 
matter entirely. The essential questions hampered-by them. GEE 


Web wonders 


Five Websites that thought about their visitors before 
they built anything 

Computer Arts 

[w] www.computerarts.co.uk 


The revamped Computer Arts site is a model of functionality and 


elegance. Easy to use and yet still unmistakably part of the CA 
| brand, as well as being chockful of easy to access info for anyone 


using any screen resolution. 


[w] www.easyjet.com 
Simple needn't mean tawdry. Easyjet lets you book a flight within 
seconds with its crisp, clear layout and superbly simple 
functionality. No fuss and no hassle — no wonder they do over 60 


per cent of their business on-line these days. 


Gamespot 
[w] www.gamespot.co.uk 
> A Excellent use of HTML text gives Gamespot an unmistakably vivid, 


bold appearance, without sacrificing fast download speeds. It's | aj MS Pablinhor 2000 
amazing what you can do with a bit of colour, a couple of fonts and | ne oe 
some thought. 


Steve Double Photography 
[w] www.double-whammy.com 


Superslick showcase of Steve Double’s photography. Intelligent 
use of DHTML that works in both Navigator and Internet Explorerto 
give the history of each photo by rolling over it. Alternative version 


provided for older browsers too. 


of DTP | 
g. Web Desig? | 


J The on-line bank presents a bold visual identity along with clear, 


+-page 4 


concise navigation to the various services it has on offer. The black O ke: Y our com p | ete A of tad 
and white photos look striking but download superfast. ate ee 
of DTP and web design oO 
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Sign up for your free YAC Number and you 
could win a state of the art WAP mobile 


phone at 


is all you've ever needed to get on in the world 


i _ 


en b= 
YOU'RE ALWAYS CONNECTED” 


d to get your phone calls, voice mail and faxes 
whenever you want, ©" “<2 


can manage your personal communications online, forward your 
in the world and receive voice mail and faxes in your email inbox 


JUP ESSE 
feeea WWW.yac.futurenet.co.uk 


PLICATION abaliss 
[1] You don't have to sacrifice substance for style according to Flash ae 
producers, Spooky and the Bandit. Looking through Spooky’s list of 
completed works, it’s clear that the group spends a lot of time being 


creative purely for its own sake. 


Spooky and the Bandit 


The grand masters of Flash reveal the secrets of their success... 


ack in the mists of time, when multimedia 
was young and dinosaurs should have 
walked the Earth, two college students made 
a life-changing discovery. It was called 
Rituroutve Splash, and their chance discovery has 
helped to change the way many Websites are 
presented today. 

Spooky and the Bandit is the name adopted by an 
all-star Flash production team who started working 
with the program before it was even called Flash. The 
group consisted of four people, two of whom used the 
pseudonyms Spooky and Bandit when playing the 
venerable computer game Duke Nukem. Although only 
two of the four, Dave Williamson and Mike Jones, are 
still members of Spooky, the Flash production team 
they formed continues stronger than ever. 

Talking about how they originally started, Mike 
Jones recalls, “Dave and me started our craziness 
together. We were at college together and while | was 
waiting for a flat, | dossed at his place and we 
discovered Splash Animator together. It’s another one 
of those Web stories, where two guys at college get 
their first exposure to the Internet, decide in their own 
arrogance, ‘we can do so much better’, then buttonise 
everything with Kai's Powertools Spheroid Designer 
like it’s going out of fashion. Then our visual studios 
manager said, ‘Guys, you’ve gotta see this.” 

What the manager had to show the guys was the 
MSN Microsoft Network Website, which at that time 
was created using Splash Animator and required the 
Splash plug-in to view it. 
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Mike continues enthusiastically, “The navigation was 
the thing that really rocked my world. It had a 
navigation bar and when you clicked on it, the whole 
thing expanded and when you rolled the cursor over 
the buttons, they glowed slightly. Everything was 
responsive. Looking back, it was twinky. But seeing 
that, | thought, ‘This is going to be so big.” 

As Dave observes, “At that time, there was just no 
way you'd be able to produce that using any kind of 
other programming script.” 


Learning curve 


So to cut a long story short, the boys started working 
with Futurewave Splash Animator, which soon after was 
bought by Macromedia and became Flash. They 
became part of an on-line community of developers 
who were learning how to use the program, and who 
were all exchanging ideas and tips. But it wasn't all 
happiness and light. Mike says, “In the past, the Spooky 
name has had a kind of pseudo stigma attached to it. 
Not because we'd done anything wrong, but because 
we were producing things in the early days, that a lot of 
people are only just managing to produce now using 
Flash 4. We'd be chatting away in a newsgroup and we'd 
say ‘Hey, take a look at this’. And it would just go quiet 
and no one would reply. Then we'd check our logs and 
see 700 or 800 people had downloaded the file.” 

Professional jealousy? 

“| don't think it was professional jealousy — | think it 
was more of a shock. We were doing things that people 


thought were impossible. We just clicked — it was as 
simple as that. There's no hidden trick to being able to 
use Flash. If you click with a program, it just makes 
sense and Flash doesn't make sense the same way that 
other programs do.” 

“Mind you,” chimes in Dave wryly, “Have you seen 
Banja.com? They say in all their blurb, ‘The first point 
and click adventure’, but they actually contacted us 
and asked how we did our point and click adventure in 
Flash 312 months before, so we said, ‘Okay, but yours 
is still the first, yes?” 

So just who is Spooky and the Bandit now? Well, in 
one sense, the team has done the big corporate thing 
and become integrated into the company Answerthink. 
When we asked what type of company Answerthink 
was, everyone in the room laughed heartily. Mike 
explained, “It’s because we're a new media agency. But 
what does that mean? We could take a lot of titles. It’s a 
new industry and people haven't quite sorted their 
labels out yet. One company’s definitions are 
completely different to another company’s.” 

Richard Stevens, Spooky’s producer, and the most 
political of the interviewees, added, “All the large 
companies are looking for the best model, and | don't 
think anyone's found the best model for a way to set up 
a Web or Internet agency.” 

So Spooky is just a company brand name then? All 
present firmly assert that it’s more than that. Says 
Dave, “In a sense, Spooky is the sum of the people in 
this room. It’s also the Flash production department 
within Answerthink.” 

“But,” rejoins Richard, “It still has an ethic and in 
some ways that holds even truer now that there are so 
many people doing Flash. It’s about the decision to 
make Flash content fully integrated and not just make it 
bells and whistles. We want to turn it into useful, 
resourceful tools and experiences.” 

Mike adds, “Spooky is about using technologies and 
doing things that we wouldn't normally get to do for 


Sia 


| Address 6) hitp://wew.bbe.co. uk/education/tocks/flash/indextime. html 


What do members of Spooky and the Bandit get up to when they're out of 
the public gaze? It's all revealed at their home sites... 


Precambrian 


om £3 8m 


[2] Action Fighter is an example of just what can be achieved 
using Macromedia Flash. 

[3+4] Flashis ideally suited to rich-media education sites such 
as these for the BBC. 


y/ 


(clockwise) [w] www.bizcuitman.com - Todd Routson (animator), [w] www.flashgen.com - Mike Jones (programmer), 
[w] www.testbild.com - Chris Glaubitz (programmer), [w] www.oldskoolflash.com - Dave Williamson (programmer). 
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Says the team’s animator, Todd Routson, of classical 
art training, “I consider my strong point to be 
character animation and cartoons. There are so many 
Flash animations out there that are just badly done. If 
you take Flash and combine it with proper animation 
skills, you can come up with a great result that doesn't 
kill your file size. But your average monkey working on 
Flash wants to tween: ‘I click here, | click there, | say 
animate, and it moves.’ That’s not animating. That's just 
making something move across the screen. If you see 
a classically trained animator versus a guy who can 
program Flash and thinks he can animate as well, 
you'll see the difference...” 

At this point Mike jumps in, “Todd should know... 
he started as one of the guys who thought he could 
animate. Then he got to see someone who really could, 
and now he really can too!” 

Todd agrees, “We had a couple of guys that came 
in who produced some top notch illustrator drawings 
that looked like something from a textbook but they 
moved. It was incredible. Put traditional illustration 
skills together with Flash and it’s incredible.” 


Mike adds, “A good designer is a good designer, 


and that carries through everything that they do.” 
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Welcome to the subject of 
"Throatology”, our interactive 
guide to the body's response to 
infections of the throat. 


The micro-organisms that cause 
throat infections tend to enter 
the body via the nasal 
passages, as illustrated in the 
cross-section diagram opposite. 
Let's now zoom in on these to 
see how an infection can occur. 


Press play to continue. 


clients on the business side.” He gestures towards the 
Action Fighter game running on the monitor. “Take this 
for example. This is Chris's baby. It’s insane, but no 
client would ever ask him to do that.” 

Action Fighter is a full on-line Street Fighter-style 
combat game that runs entirely over the Internet and 
has been exclusively created by Chris Glaubitz, 
Spooky’s German team member. Although Chris 
doesn't speak much, beneath his quiet exterior lies an 
intellect as sharp as Mike and Dave's wit. He comes 
over as the archetypal hacker-turned-programmer 
type, although it’s a stereotype he denies. The other 
team members clearly hold him in high regard, despite 
their own significant achievements and prowess when 
it comes to creating Flash code. 

Mike sums up the team’s attitude best when he says, 
“Chris makes scary things. It’s as simple as that. He’s 
dangerous in a well-lit room, and I'd hate to get him ina 
dark one! You give him Flash and he'll produce the most 
extravagant and amazing code you've ever seen.” 

Warming to the theme Dave adds, “He’s one of those 
sick people that knows how maths works!” Mike comes 
back, “Yeah, we're all the thickies. He’s the one that 
actually understands all of this.” 


United we stand 


Watching the team banter like this, one gets a sense of 
genuine camaraderie between them, and it’s easy to 
see how such a tight-knit group can work so well. 
They've earned their reputation, and Mike seems 
justified when he says, “Very few people can program 
Flash really well and the people in this room probably 
represent one of Europe’s most experienced teams.” 

This time Richard isn’t just reciting the corporate 
line when he says, “You'd be hard pushed to find a 
better team than you have in this room right now.” 
There's genuine pride in the achievements of the group. 
We asked Chris if he minded sharing hard-earned 
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programming tricks with the rest of the world. He said, 
“| have no problem sharing my source code with 
people, but the number of people who can understand 
and utilise it is very small. Most of those could maybe 
write the code themselves.” 

However, as Dave comments, “We always keep 
some little tricks to ourselves. They don't stay secret 
long once people see them and they all start working 
out how we did it. Then, just when they claim to have 
cracked it, we'll go on the newsgroups and announce 
how we did it. It’s like a game. It’s about kudos.” 

We wondered whether or not there were ever 
conflicts between Spooky’s vision and a client’s 
requirements. Richard said, “When you're working for a 
client, there’s always a certain amount of compromise. 
You're trying to deliver the best for the client and 
hopefully you can persuade that client that you know 
what's best for him better than he does.” 

Mike adds, “There are always hurdles, the pros and 
cons that can be brought to the party with the 
technology. You wouldn't go to a client and say, ‘I'm 
going to build you a Website and I’m going to use Flash 
or HTML’. That's like saying ‘I’m going to the toilet and 
I'll be back in a minute.’ I’m not interested if you're 
going to the toilet. The client has an objective and it’s 
up to us to achieve that. We wouldn't say, ‘This is Flash, 
you will use it’. That’s not what we're here to do. We're 
here to marry up the best technologies from all the 
Web has to offer. We also have traditional designers 
and HTML coders.” 

So to the future. Do the team members see 
themselves all going away and setting up as solo 
operators? “Definitely not,” says Dave. “The days when 
one guy could do everything are gone. Now it’s about 
bringing together an effective team. Allying yourself 
with the right specialists. We're happy here.” EEE 


Action Fighter. The impressive thing is the fact that it was written using a 


One of Spooky's most impressive achievements is an on-line game called 


language designed for multimedia and that the whole thing runs on-line. 
Creator Chris Glaubitz explains how he did it... 


a The first step was to create a rough mock-up. At this 
stage, the fighters can only move forwards and 
backwards. It gives a first impression of the speed of the 
final game. Because it's designed to be accessible via the 
Internet, the file size is all-important, so this is the time 
when we can see if there are likely to be any problems. 


Once a fighter has been imported as a bitmap, it has 

to be traced and cleaned up by hand. Because file 
size is a constant challenge, we converted every fighter 
from bitmap format into a much more compact vector 
format. Not only does this keep the file sizes to a minimum, 
it also maintains scalability at all screen resolutions. 


5 | Now that the game is playable, we need to add 
artwork and coding for the menus, intros, outros and 
transitions. Although mundane, all of this ‘prettification’ is 
vital because as they say, ‘first impressions last’. The game 
is now ready for a first public beta test. This is when we 
allow our friends and colleagues to thrash the game in 
order to find any bugs before its general release. 


Ez We used Poser to model the character animation. { 
Each movement phase of every fighter has to be 
modelled in Poser and imported into Flash. The timing of 


each move is very important to give the right impression j 
of speed and agility in the game. Each character also has 
to move inside its boundaries and hit in the same spots. 


4 | The basic engine of the game is born. Each of the two 
fighter models and the background image are 
streamed in during the game and are now represented by 
boxes. The code for things like collision detection, score 
counting and artificial intelligence are also divided in 
several movie-clip symbols. 
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Of course, no program is ever bug-free and our beta 

test has revealed some bugs for us to track down. But 
knowing there's something wrong and tracking it down 
are two entirely different things. Errors in the game 
threaten to stop the whole project so | spend two long 
weeks trying to find the needle in the haystack, or rather 
which of the variables dumped on the screen is not correct. 


I: 


2) 
ras) 
rot 
® 


[1] Spooky seems to have done a fair share of work for 
pharmaceutical companies, who have an unquenchable thirst 
for medical animations! 

[2] For our money, this understated Website for Hoffman La 
Roche is one of the best ever. You can find it at [w] www.roche- 
hiv.com/roche_movie.html 

[3] Flashis great for graphically rich sites designed to appeal to 
children. This one is for BT. 

[4] Spooky says that Flashis not about doing big, showy sites. 
This tennis site uses one of Spooky’s subtle Flash interfaces. 
[5] The Interactive Christmas Card Maker is a great example of 
the way that Spooky is having fun with Flash. 
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Illustration: Magictorch. Telephone: 01273 202147 
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Art for Arts’ sake 


Discover a few secrets as we reveal how the new 
Computer Arts Website was built... 


t’s one thing to design a five 
or ten-page brochureware 
site of the kind that small 

i! companies are keen to 
commission these days — you know, 
striking graphics, most likely a bit of 
fancy Flash animation, and if your 
client’s really on the ball, a cautious 
nod in the direction of e-commerce. For 
the majority of Web design firms, this 
still seems to be the staple diet. 

But all that’s about to change. From 
the sophisticated e-commerce 
operations of the dotcom upstarts (think 
lastminute.com and jungle.com) to the 
1000+ page media and information 
sites (think ft.com and askjeeves.com), 
there's a whole different ball game 
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going on right now, and it’s responsible 
for the most powerful sites on the Web 
today: the database-driven Web, 
coupled with clever ways of offering lots 
of information in uncluttered Web 
pages with links too enticing to resist. 

The brand new Computer Arts site, at 
www.computerarts.co.uk, is one such 
operation, and we're going to let you in 
ona few secrets about how we made it. 
You see, it’s just a matter of time before 
the realisation filters down to your 
everyday client that this is the only 
sensible way to handle information and 
sell products. So it’s just a matter of 
time before your chance to pitch for 
such a project lands in your lap — and 
this could mean big bucks for you. 


But the question is, do you have the 
skills and design know-how to take ona 
large-scale project when it comes? As a 
designer, chances are you won't need to 
understand the intricacies of back-end 
development, but you'll certainly have 
to work very closely with the back- 
enders (plan on at least ten phone calls 
a day), and you'll have to be aware of 
whole host of design issues — both 
opportunities and hurdles — relating 
specifically to database-driven sites. 
Indeed, the more you understand about 
what the back-end developers are 
doing, the easier your job will be, and 
the better the results you'll get. 

What you will have to be extremely 
skilled at, however, is finding ways to 


display and navigate visitors around an 
ever-increasing number of pages 
without it becoming one almighty ruck. 
Viewers want the content, and masses 
of it, by all indications — but with a 
minimum of effort involved in finding 
exactly the bit they're interested in right 
now. And that’s not an easy thing for a 
designer to achieve. 


Database details 


You'll be familiar with HTML and 
JavaScript, but the Computer Arts site 
also uses ASP with server-side 
VBScript and includes. These sound 
scary, but the principles are simple — 
ASP enables us to create a single HTML 
page and then use VB to control what 
text, images and so on appear in it — 
these are taken from the database. 

So if you read the popup news stories 
at [w] www.computerarts.co.uk/news, 
you'll see Web pages with different text 
and images — but in fact, there is only 
one news story page. When you click on 
the popup link, the URL contains 
information after a question mark — 


“at 


QO. one 


[w] www.computerarts.co.uk/news/ 
storyaa.asp?id=1234 for instance — 
which tells the server which news story 
it is you want to read. 

The server then puts the HTML pages 
together with the appropriate content 
from the database on the fly, and sends 
it down the line to your screen. If you 
check out the source of these pages, 
you'll see no evidence of this at all — 


arts Pec pass) The Complete Guide 
.co.uk to Computing 


Computer Arts 


The resource for computer creatives 


eer 
| 


fea 


Twloriais 


a) Seeeace 


———— 


you just see what looks like a normal 
Web page. 

In a similar way, the date that appears 
at the top of the navigation on all the 
main pages of the Computer Arts 
Website doesn't have to be updated 
every day. It’s created by just a few lines 
of VBScript, which are processed on 
the server — which means that if you 
look at the source as it arrives in your 
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browser, you'll just see normal 
formatted text for the date. 

Server-side includes, meanwhile, 
are especially useful if you have the 
same item appearing on a lot of 
different pages. They are fragments of 
HTML — a single table, say — which you 
create as a separate HTML file, and then 
reference in the true HTML documents 
that are meant to contain them. When 
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you request the page, the server inserts 
the include into the Web page at the 
right place, and sends it to you as a 
seamless Web page. All the navigation 
bars throughout the Computer Arts site 
are created as a series of includes, for 
instance. This means that if we need to 
add a new button, say, we only need to 
change the right include file, instead of 
going through every page. 
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Stage Two: Basic animation 


The new Computer Arts Website is designed to be easyt to use while simultaneously presenting a lot of information. Planning for this sort of thing probably takes longer than the actual implementation. 
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In this age of Flash, it’s easy to forget 
JavaScript, especially since its 
ways and means seem less than 
intuitive to the designer. But that’s a 
mistake, as JavaScript is an 
incredibly powerful yet simple 
language, offering control over 
almost every aspect of the way your 
visitor's browser behaves. Even if 
you have to get someone else to 
actually create the scripts, it's well 
worth knowing some of the creative 
uses you can put JS to. 

The Computer Arts site uses 
JavaScript on every single page, if 
only in some cases to check the 
page isn't in someone else's frames. 
We also used it to run the amazing 


Just in... 


[ 02.05.00 } 


até 


Headlines 


two-hourly updated news ticker at 
[w] www.computerarts.co.uk/news, 
and the rather clever widget at [w] 
www.computerarts.co.uk/mag/ 
getbackish.asp, where you can see a 
preview of the back issue you're 
interested in buying. You have to go 
to [Ww] www.computerarts.co.uk/ 
mag/backish.asp and click on one 
of the issues there to see the effect. 
Feel free to View Source and check 
out the scripts we used to make 
these happen — although do please 
credit Computer Arts if you use any 
part of them. 

Simpler, though, for the JavaScript- 
novice designer, are the pop-up 
windows throughout the site, at 


We used functions for changing the text in a layer to make the newsflash 
scroller on the main News page, at [w] www.computerarts.co.uk/news 


Working like this is essential if you’re 


creating a large site, like Computer 
Arts, which contains about 100 true 
HTML pages (many of which could 


contain any number of different articles 


— currently they spawn about 1000 
different downloadable pages). It’s 
essential, because otherwise you'll 


never get this site finished, let alone be 


able to update it regularly! 


Making use of the database also 


Scared of it? Don't be — JavaScript can make your life much easier... 


[w] www.computerarts.co.uk/news 
and in the tutorials section, [w] 

www.computerarts.co.uk/tutorials. 
The JavaScript for these is simply... 


<script><!- 

function ca_popup(theurL{ 
pop=window.open(theurl,’popup’,'to 
olbar=yes,location=no,directories= 
no,status=yes,menubar=no,scrollba 
ts=yes,resizable=yes,copyhistory= 
no,width=595, height=470") 

} 


//—></script> 
That goes in your HTML head. Then 


for the links you have to put <A 
href="javascript:ca_popup(‘theurl’) 
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”">blah blah</A>. Between 

the single quotes, instead of ‘theurl’ 
put the normal URL for the HTML 
Page you want to appear in the 
popup. The frame check mentioned 


above is even simpler. In your head... 


<script><!- 
//ca_framecheck 
if 


(window.location.href!=top.location. 


href) 


top.location.href=window.location.h 
ref 


} 


//—></script> 
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We used JavaScript a great deal — to control the covers on the Back Issues 
page, at [w] www.computerarts.co.uk/mag/getbackish.asp for instance. 


similar story, as are about ten other hub 


And that's it! Another good trick 
for designers is to create text that 
changes when you roll over different 
images — as live text rather than GIF 
image rollovers, to save download 
time. This allows you to convey 
masses more information in a page, 
with more exciting interactivity, and 
without your design becoming 
cluttered with too much text. Check 
out the left-hand bar in the Web 
profile pop-ups, via [w] 
www.computerarts.co.uk/websites. 

To do this, you have to create a 


layer, give it a name, and put the 
words in that. Then you can write in 
a JavaScript — for Internet Explorer... 


function 

ca_changetext(thenewtext){ 

thelayername.innerText=thenewtext 
} 

or for Navigator: 

function 

ca_changetext(thenewtext){ 

eval(document.thelayername.docu 


ment.write(thenewtext)) 


} 


Change ‘thelayername’ to whatever 


i 
| 
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the name of the layer is, and in your 
<A href> tags for the rollovers, put 


onMouseover="ca_changetext(‘new i 
text’)”. Substitute ‘newtext’ for 
whatever you want the rollover text 

to be, keeping the single quote 
marks. Et voila! 


database — what different fields do you 


means we can have all the Website's 
navigation, teasers, and headlines on 
hub pages update automatically. For 
instance, the Tutorials page at [w] 
www.computerarts.co.uk/tutorials is 
programmed to automatically display 
the latest tutorial put on-line in each 
category. The Headlines page at [w] 
www.computerarts.co.uk/news is a 


Planning is essential, otherwise 
you'll never get the site finished, 
let alone be able to update it 
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pages in the site. And the tips in the 
tutorials section are automated ina 
similar way. You simply put your article 
into the database once, then apply 
some code to the hub with a logic that 
says, ‘Find the four database entries in 
this categories with the latest entry 
dates, get the words from the strap line 
column for each, and put them in the 
HTML with this formatting.’ 


Big design 

Designing around a database can be 
quite tough, and involves a great deal of 
planning and discipline. The first major 
hurdle is planning how to structure the 


want? The whole thing can seem very 
abstract until you've actually got a 
tangible site up and running. 

The second issue is that much of the 
design needs to be done before the 
database building can go far, and you 
need to be specific about the 
databased elements you need and their 
attributes — for instance, a heading, a 
strap line, how many images and at what 
size, whether you want ALT text for 
images, and so on. 

It can also be hard to go back and 
change aspects of the design of 
databased parts of pages once the site 
is running — using a different design for 
each article is simply out of the 


————skitled back-end programmer can code | 


question. On the plus side, however, a 


a single page to show different graphics 
depending on the date, how an article is 
categorised, and so on. 

Asa designer you can take full 


for your viewers to 

Tree-style naviga 
permeate every noo! 
cyberspace, and are q 


back and forth. It feels like thumbi 
through a dictionary, and less like » 
sorting through a filing system. > 

Which is why amazon.com tells you a 
number of other authors you might > 
enjoy when you're looking at a 
particular book. It’s about offering links 
to similar and related things, and quite 
possibly to entirely different areas of 
the Website. 


ag categorise to survive 


“This i is where insightful. ities 
design coupled with a base | 

ful. Onthe- 
Computer Arts site, everything is 
categorised in several different ways — 
what type of article it is: news, tutorial, 
and so on; what areas of design it relates 
to: Web, 2D, 3D and so on; what time 
period it’s relevant to, and more. This 
means that we can now design ina 
widget which, groups any one article 
together with a network of other articles 
according to different criteria. If you’re 
looking at a piece of news about GoLive, 
we can have the news page show you 
links not only to other news pieces, but 
also to GoLive-related Web tutorials, 
Website profiles and so on — and all 
both automatically and dynamically in 
response to you. Powerful stuff, and far 
more intuitive for the curious user than 
the traditional tree structure. 

Building this kind of back-end 
system does involve an significant 
investment of work and forethought, as 
wellas hard cash, at an early stage — 
we spent three intensive months 
developing the Computer Arts site 
before it went on-line. But you can bet 
that it will pay off in your hit count ina 
short time, and it’s a surefire way to 
impress a client. 


| 


If you're developing a large site, it's essential to use templates, otherwise you'll 
have to apply every overall design tweak that you make to every single page 
by hand. This makes Dreamweaver templates essential 


Back it up! 
Just one thing — always back-up 
your whole site before changing a 
template and applying it to your 

pages. That way you won't be 
kicking yourself if something 


goes wrong... 


The idea of Dreamweaver templates is that you 


at all from page to page — logo, ad, navigation for 
instance. Then within this page you create ‘editable. 
areas’, in which pages attached to the template can 
contain anything at all. 
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To create your template page, you simply start a 
new document and create the design and layout 
just as you would a normal HTML page. Then use 


File>Save as Template, ignoring any warnings, to turn 


it into a template. 


Daily Photoshop tip 


Use was Uieairaestien From Template to create a new 
a Web page following your template. Then you 
simply open the page and put the page's content into 
the editable areas as normal HTML. 


ane: a ‘shell’ page with parts that don't change 


2 | Then if you need to make a change to overall 
design of all your pages attached to that template 
— change the logo size, say — you just open and amend 
the template page, and Dreamweaver automatically 
updates all the pages attached to the template. 


Ai 


MK 


4 | Next you specify which parts of the page are 
editable areas, using Modify>Templates>New 
Editable Region. You give the area a name, and you 
can have a number of these editable areas in your page 
— including in the head of your HTML, for scripts, say. 


‘Store Photoshop & 20 


G You can also change which template pages follow 
at the click of a button, using your Templates 
palette - very useful if you need to experiment with 
several different designs, but only want to create the 
content for each page once. 
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Mass image processing. | 


The new Computer Arts site has thousands of images, which offer visitors a strong visual experience. But if 


you're working with a large number of images, you don't want to waste time prenaae them to the same 
specifications, one at a time. Here's how to do the whole lot in one go... 


Best new web design in profile 


{EEX The site of outdoor clothing firm The North 
Face reflects the company’s reputation for 
adventure and innovation, combining clean, 


Interesting content about current expeditions 
“Its @ bridge between The North Face and 


their customers,” says programmer Ben 
Rigby. “Before we put pencits to paper, we 


First 9 Months 


Los The North Face 
Ly Paradox and H73 


meet the client and extract all their 


First, you need to decide some design 
principles for the images. Are they going to be 
standard sizes? Are they going have borders? What 
format — GIF or JPEG — are you going to use? 


[41414] 


& Preview 


Name the Action, hit OK, and then start 
performing the steps on your image that you 
want to occur in the batch. For instance, you might 


resize the image, then apply a Sharpen filter and use 
Levels to increase the contrast. 


Now to apply these steps to a number of 

images, put them in a single folder and choose 
File>Automate>Batch in Photoshop. For the Source, 
click Choose folder and navigate to the folder where 
the images are. 
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For instance, all the icon images on the 
Computer Arts site are 50x50 with a one pixel 


black border. This is both effective in the design and 
makes preparing them for the Web in large numbers 


easier — giving us more time to concentrate on the 
content of the images. 


If you want to add a border, Use 

[Ctrl/Command]+A to select everything, set 
your foreground colour to the colour you want your 
border to be, and then use Edit>Stroke to apply the 
border. This method works with any image, 
whatever its size and shape. 
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8 | Usually you'll want to create another folder for 
the processed images, and navigate to that as 
the Destination — but if your action includes a Save, 
just choose None from the drop-down. Then just hit 
OK, and Photoshop does all the work! 


D big pic - crop to 307:230 first 
D icon: crop to 1:1 first 

D tut intro pic ~ crop to 337:253 
D tutorial big ple 

D website - crop to 100:76 
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To process a batch of images in one go, you 
need to set up an action. Open an image, 


prepare to the point you want the batch process to 


begin, then find your Actions palette and select New 
Action from its drop-down. 


You can also include Save and Save For Web 

(which is to say, Optimisation) commands in 
Photoshop actions. Then when you're done, click 
the Stop button at the bottom of your actions 
palette, and your action is ready to use. 


If you want all your images to be the same size, 
you'll have to crop to the same proportions 
before you process them. Use the Marquee tool and 
choose Fixed Aspect Ratio from the drop-down in 
the tool's options, entering your proportions in the 
fields. Crop your image via Edit>Crop and save it. FEE 
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Director 8 Shockwave Studio 


The new version promises stronger Internet content and lower bandwidth... 


Computers Unlimited 


5 caine 


~ 


02083585857. 


www.macromedia.com/uk 


tidal 


¢ Full multimedia on the Internet 
using Shockwave 


* CD-ROM and Kiosk-based 
productions 


* Scalable movies 


© Increased multi-user and Internet 
chatroom tools 


¢ Simplified interface 
* Improved handling of audio 
* Better compression of image files 


* Runtime Imaging 


200MHz Pentium * Windows 98/ 
NT 4 © 64MB RAM 


acromedia’s Director has 
been sitting pretty at the 
top of the multimedia 
authoring tree for some 
time. With version 8, Macromedia has 
focused the product more closely on 
the Internet. Shockwave is rapidly 
becoming the multimedia face of the 
Web, so the company has introduced 
some new features for improving 
content and reducing bandwidth. 

On the outside, Director does look a 
little different. Macromedia has kept 
the interface that users have learned to 
work with, but improvements have been 
made. The most significant of these is 
the Properties Inspector. This replaces 
many of the dialogs and windows you 
previously had to sort through to locate 
information on your movies and sprites. 
You can now locate and alter your 
sprite’s colour palette, ink type, Lingo 
script and so on, in one handy box. 

The Properties Inspector gives 
details of whatever sprite is selected, 
so if you select several sprites with 
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The score is a timeline, on which you decide what happens when you're in a Director movie. 


common properties you can alter them 
all at once. For example, say you've got 
dozens of pieces of text in your movie 
and you want to set them all to the same 
colour, you no longer have to alter each 
piece of text individually, you can 
simply select them all and then make 
the change. 

Top of many designer’s wish-lists 
for the new Director has to be scalable 
movies. Up to now you've had to plan 
well ahead, keeping the expected size 
of the Viewer’s Browser window and the 


overall design of a Web page in mind 
when creating Shockwave content. Now, 
at last, you can set Shockwave movies 
to scale themselves according to the 
size of the Viewer’s window, giving you 
confidence that your work will look the 
same whatever it’s viewed on. 


Going to the zoom 


This scalability has been extended to 
the design stage. You can now zoom in 
or out on your movie while you're 


You'll find that the Director screen is still pretty busy, and you still have to shuffle windows around to work with the software. 
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With Director 8 you can create a chatroom application in five minutes. You need to have access to a Shockwave 
Multi-user Server to run the chat application on-line but, once you've got that set up, it's plain sailing... 


iy First, set up the Connect to Server 2 | Create frames for handling what 3) Now to actually create the chat page. 
behaviour. Create an opening screen happens if the connection fails. The On the frame you've specified in step 
with a field for the user's name and a Connect to Server behaviour automates 1, create a text input field. Next, drag the 
button labelled Connect. Then, drag the the process, so you can specify where to Chat Input behaviour onto it, a larger text 
Connect to Server behaviour onto the jump if something goes wrong. We've set box onto which you need to drop the Chat 
button and fill in the IP address of the up simple error pages using text elements. Output behaviour, and finally a button for 


Create the movie. Go to Publish on 
the File menu and your chatroom will 
be created as a Shockwave file. A simple 
HTML page will also be created with the 
Shockwave movie running inside it. All you 
need do now is place it onto your Website. 


multi-user server you're using, and the 
frame to jump to after connection. 


working on it. This means that you can 
position objects on the stage with much 
greater precision, or Zoom out to work 
on projects designed to play full-screen. 
Also new is runtime imaging. You 
can now create and edit images while 
the program is running using Lingo. This 
feature opens the door to creating paint 
applications and chatroom whiteboards, 
where many users can co-operate in 
working on an image or diagram. This is 
great, but there’s much more on offer. 
Runtime imaging also means that you 
can composite pictures and animations 
during runtime, creating large complex 
images from small, low-bandwidth ones. 
There is also a set of new transitions, 
which can be used on single sprites 
rather than the whole stage. Because 


these transitions are written in Lingo 
— Director's own native programming 
language — rather than in C, designers 
can edit them, creating new runtime 
effects to order. 

Lingo itself has moved on, too. Sound 
is now handled much better. You can 
play different parts of an audio file or 
alter its volume and stereo positioning 
as it plays. You can also layer multiple 
sounds in Lingo and control their start 
and stop times with great accuracy. 

As we're constantly told, the Internet 
is acommunity, and Websites that 
thrive are those which foster that sense 
of community. Shockwave's tools for 
creating Internet chat and other Multi- 
user applications have been enhanced. 
By using the drag’n'drop elements, 


Macromedia claims that you 
can set up a simple chatroom in 
just five minutes 


Fireworks 3 is bundled with Director in 
the Director 8 Shockwave Studio. It's an 
image manipulation package, designed 
specifically for optimising images for the 
Web. You can add Internet animation to 
images by creating (for example) rollover 
behaviours and animated loops. However, 
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the most significant feature of Fireworks 


is its ability to compress picture files. You 


can alter the scale, compression, and 
colour depth of images and see how your 
changes will affect the finished graphic. 
This provides a good compromise between 
image size and quality. 


dragging the Disconnect From Server 
behaviour on to. 


Macromedia claims that you can set up 
a simple chatroom in just five minutes. 


Playing with Fireworks 


Fireworks 3, Macromedia's excellent 
image compression tool (see boxout) 
is included in the Shockwave Internet 
Studio package, and Director has been 
better integrated with it. You can now 
specify that the images within your 
movie are to be compressed using 


Fireworks, and Director will do the 
work for you. You can specify different 
compression settings for each sprite so 
you can make the trade-off between file 
size and quality yourself, or you can set 
the compression globally so all images 
are compressed the same way. This’ ll 
make life easy if you’re producing 
several versions of your Shockwave 
movies for different Internet users. 

The design of vector graphics has 
also been improved. Previous versions 


Fireworks 3is bundled with Director and enables you to optimise image files for the Internet. 


Generating a slideshow 


With Director 8 it's even easier to create a slideshow for the Internet or CD-ROM. Here's how... 


Ly us 


Place your images in sequence on the 
Score window. Each frame will be 
represented by a block. Drag the length of 

your images so each one covers however 
many frames you want it to display for. 
Play through the slideshow and you should 


Import your images into the Cast 

window. With Director 8 you don't 
need to compress your images first - you 
can do that using Fireworks from the 
Property Inspector. 


Now it’s time to add transitions. Open 

the Effects channels with the button 
at the right of the Score window, and then 
double-click on the transitions track at the 
first frame of each image. A dialog appears 
so that you can pick from a range. 


Our slideshow is currently automated. 

Try making it browsable by inserting 
Back and Forward buttons on each screen, 
and then set them to move the playback 
head to the appropriate frame. 


of Director only enabled you to create 
very simple shapes. Each graphic could 
only be made up of one single line. If 
you wanted to produce a more complex 
image, you had to create multiple 
graphics and lay them over each other. 
With Director 8, though, all this has 
changed — you can build sophisticated 
vector graphics in the editor. 

The Library palette now contains 
more drag’n'drop behaviours. These 
behaviours are simply pre-written 
pieces of Lingo code which can be 
dropped onto any appropriate object on 
the screen. For example, take a graphic, 


see each image appearing in sequence. 


place it on the stage, then drag the 
‘Random Movement and Rotation’ 
behaviour onto it. When you click Play, 
the sprite moves randomly around the 
screen. No programming is needed. 
Behaviours range from animations to 
text handling, navigation, sound control 
and Internet applications. 

Once a production has been fully 
completed, it needs to be published. 
Directors new Publish tools offer a 
range of possibilities. You can create 
simple Web pages to play your 
Shockwave content (a function which 
used to be handled by a separate 


There are many interesting 
additions that will free designers 
from some of the old constraints 


In Director 8, movies are constructed on the stage. You can position objects by dragging them, or 
by moving them at runtime through Lingo. 


program). You can control how your 
movie is compressed, tune various 
aspects of it — including the way it’s 
scaled to fit the Web page — and you'll 
also be told how browsers handle it 
when they don't have the Shockwave 
Player installed. 


Movie Director 


| 
Directors Web creation options aren't a | 
realistic replacement for a decent Web | 
design tool, but they can help outiftime | 
is pressing, or if the non-Shockwave 

content of your page is small. | 
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The new Property Inspector in this version of 
Director collects all the information about 
your cast members in one place. 


You can also, of course, publish your 
movie as a standalone executable file 
for CD-ROMs and Kiosk productions. 
So, non-Internet designers haven't been 
forgotten, but the enhancements are 
clearly designed to reduce bandwidth 
for productions destined for the Web. 

Allin all, upgrading to Director 8 
is well worth considering. There are 
many interesting additions that will 
free designers from some of the old 
constraints, as well as simplifying work 
on complex projects. The addition of a 
list view in the Cast Member’s window 
will help speed up locating elements in 
large productions, too. 

Shockwave is well-established as 
one of the best ways to provide complex 
multimedia on the Web, and, with this 
new release, Director looks likely to 
continue to be an essential tool in all 
types of multimedia production. EEE 


Verdict 


SHIH 


Speed CESESES 
Value formoney §E3E3E3 
Ease of use He ee 


Documentation 


For: Low-bandwidth Internet 
multimedia ¢ Bags of features 
¢ Improvements in handling of 
sound, images and the Internet 


Against: Shockwave is not 
installed on all browsers Still a 
little tricky to pick up * Mac and 
PC versions no longer included in 
the pack - you need to buy two 
versions to work cross-platform 
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Whatever your company size, we have 
the web hosting solution. 


i , lik t things, come in diff izes. ich i é Fi 3 
Businesses, like most things, come in different sizes. Which is why we've SR ae ae 


developed a range of high quality, scalable hosting solutions designed to + Low £30 per month* option including UK domain name** 
suit any business. Whether you're looking for a shared or a dedicated * NT or Unix 
+ Full CGI and FrontPage extensions 


server, we will assist you in finding the solution that best meets your needs. } 
« Active Server Pages 


All our servers are housed in our dedicated, secure suite with multiple links * Online web and database administration tools 

to Europe and the USA so you're assured of a fast, highly resilient and well + Add-ons include: SSL and e-commerce 

connected network. And with either NT or Unix Operating Systems you a cane 7 ee server solution 
¢ Choice of bandwidt 

have the freedom to choose a system that works the way you do. All EEC domain name included** 

backed by our commitment to deliver the highest standards of customer * NT or Unix 


support. Leaving you free to concentrate on the bigger things, like building * User configurable daily bandwidth options and burstable limit 


* i ee H H H 
your business. Prices exclude VAT **Subject to UK Domain Authority terms. 


Call us on 0800 072 0000 Email info@dircon.net Visit www.dircon.net 


Direct 


Connection 


L} UK (Direct Debit) £59.00 
UK (cheque/credit card) £59.00 
Europe (inc Eire & N America)” £82.00 
_] Rest of the world” £99.00 


YOUR DETAILS 


* AIRMAIL 


Daytime telephone number _. 


Lt Es ssa as 


PAYMENT METHODS 
Please choose your method of payment 1, 2, 3 or 4 


1. CZ Direct Debit. (Ux onty) Complete the form below. Full amount will be 
deducted in advance and in one lump sum 


2. C Cheque Payable to Computer Arts Specials. Sterling cheques drawn on 
a UK account 


3. visa 1 MasterCard 


4. CZ Switch Issue no and valid date 


Your subscription will start with the next available issue 


UK readers return this coupon (no stamp required) to: 

Future Publishing, FREEPOST BS4900, Somerton, Somerset, TAI! 6BR. 
Overseas readers return this coupon (postage payable) to: 

Future Publishing, Cary Court, Somerton, Somerset, TAI! 6TB, UK. 


LC Ptease tick this box if you would prefer not to receive information on other offers. 
our Bank or Building Society to pay Direct Debits. 
Originator's Iden tification N umb er 


2 _ EEGECE 


Please send this form to address shown 


1. Name and full postal address of your Bank or Building Society branch 
To: The Manager 
Bank/Building Society 


Address. 


2, Name(s) of 
account holder(s) 


SSSR 
top right hand corner of your cheque) 

4. Bank or Building Society | | | | | 
account number 


5. Instruction to your Bank or Building Society 


Flaws py Fusions Ovect Deis athe sos eden is ramucien Steet a 
the safeguards assured by the Direct Debit Guarantee. | understand that this instruction may remain 
with Future Publishing and if so, details will be passed electronically to my bank or building society. 


Signature(s) 
Ref No oie use only)_ 
g Societies 


You may ra this blank form and then complete it. 
You cannot fax or e-mail direct debit forms. 


Order code: COSP10 Offer ends 20.08.00 


34 webdesign special 
arts 


| + Great savings! 


- Every issue delivered 
direct to your door 
(Free in the UK) 


- Never miss an issue 
of your favourite 
magazines 


Recewve the next 12 issues of Computer Arts AND 
the next six issues of Computer Arts Specials 
(out every other month). 


All Computer Arts subscribers receive a unique 
limited edition copy with the cover image 


intact and uncluttered by words. 


all the details you need to 
complete the direct debit form are on your 
cheques? 


Subscribe to both Computer Arts and Computer Arts Specials and 


computes Je 


AES 


+44 (0)1458 271108 
www.futurenet.com/promotion/p¢g010/75 


IMPORTANT: Please quote code: COSP10 when ordering. Telephone lines open 24 hours a day. 
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Dive in and enter the Computer Arts bar with 
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Director 8 Shockwave Studio 


ith Shockwave asserting 

( itself as the most popular 
4 way to create sophisticated 

multimedia on the Web, 
Macromedia has launched Director 8 
Shockwave Studio. This update aims to 
enable you to create even more interactive 
media with even lower bandwidth. 

As arule of thumb, a Shockwave movie 
file is usually only just larger than the 


images and sounds that make it up. Now 
with additional compression tools, you can 
often make your movies even smaller than 
the media they were created from! 

We've used the new package to create a 
couple of Shockwave productions of our 
own. The first is a desktop fishtank, the 
second is our own Computer Arts Internet 
chat bar — drop in on us at [w] 
www.computerarts.co.uk/web 


MAE Pes WE A BP AE 


Part 1: Drag and drop behaviour 


Here we're going to see how simple it is to create sophisticated animations using Director. Take a look at 
the file fish.htm on the coverdisc. It's designed as a screen wallpaper backdrop 


That's Lingo 


e drag and drop behaviours are 


simply Lingo scripts. You can call 
them up and edit them if you like. 
Each script is heavily annotat 

so if you know your way al 


ah 


ize of our movie to 800 by 600 pixels. 
s a large stage on which to work. 
the cast window allows us to 

phic elements we intend to use in 


Wfish Stage (200%) 


ag and drop the first fish image onto the 
e, and use the Property Inspector to set the 
ground transparent. Now resize the fish 
priate size. - 


fon exitFrane me 


set the loch of sprite 
set the locv of sprite 


to the loch of sprite l+x 
to the loov of sprite ity 


mouse, following it around the screen. 


G To create some more fish, we apply the same 
Cycle Graphics behaviour, but add the Follow 
Sprite behaviour to make the second fish follow the 
first. We also use the Turn Towards Sprite behaviour 
instead of the Turn Towards Mouse one. The result 
is a shoal of fish all swimming after each other 
towards the mouse pointer. 


Jopecdecnetthe 1Sce Sf SRELES 5 = Eg acuseki’-. —+——— between the fish and the cursor. the further 
away the mouse pointer is, the faster the fish 
swims. 

f the loch of t <th weeh then x*xspeed 

it the lock Of sprite 1> the aouseh then x--xspeed This code sets the direction of motion. 

f th f sprite i< the nousev th yeyspeed 

if the locv of eprite 1> the nousev then Y=-yspeed If the fish is above the mouse, it must move 


~<«——._ The fish is moved 


gO to the treme gp 
fend 


create variables for the speed of motion in the 
x and y directions based on the distance 


down, if it's to the left, it must swim right, etc. 


We loop back to the begining of the frame 
to start again 


Clicking on the script track of frame one in the score window, we type Lingo code as above. This code 
makes our fish swim to follow the mouse. Playing the animation, the fish always moves towards the 


The other creatures in our aquarium are little 
bugs, which we want to run away from the 
fish. Giving them a Random Motion behaviour (so 
they swim a little on their own), a Turn Towards 
Sprite behaviour (to make them turn away from the 
fish), and an Avoid Sprite behaviour (so they flee 
from the fish). We can make as many copies of the 
grub as we like and arrange them around the screen. 


3 Time to make the fish swim. Open the library 
browser, and select automatic animations. 
Now drag the Cycle Graphics behaviour onto the 


fish. We set the start and end images, and the frame 
rate, and then click play on the toolbar. The fish now 
appears to swim. 


We now need to make the fish face in the 

direction it's moving. Back in the library 
browser, in the Interactive animation section, we 
find the Turn Towards Mouse behaviour, and drop it 
onto the fish. Now, the fish swims more realistically 
towards the mouse. 


With the movie completed, we click Publish in 

the file menu to create a Shockwave file with 
its own HTML page. Our production is a little large 
to put on a Website, but it makes quite a fun 
wallpaper screen for Windows. You'll find it on the 
coverdisc (fish.html). 
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Part 2: Getting the drinks in 


Now we've found our way around Director, we'll try a more complicated Internet destination. We want to 
make the Computer Arts site a relaxing place, so we figure the best way to do that is to put in a bar... 


Altered images 
6% When you alter an image at 


Guntime (stages 4 and 5), it stays 
altered, so you need to copy the 


Paint 4:stout 


i 
cast member you're changing 


_ 


The first step is to create the images we'll be 

using. We've produced these drinks in 3D 
studio, creatingempty and full glasses. We import 
the images into Director's cast window. 


Le 


fon ncuselp ae 


Py) globe! level 
| level=level- 


nd the nese of senber 


| 
{ 
| 
| 
| 
| 
| 
| 


| repest vith y= level- 
repeat with x = 1 t 
(8) image setPaxel(x. y. rgb 


to level 


end repest 
updatest 


le ities QC UEERSS FETS —s 


$EE Internal Cast 


Each full drink image is dragged onto tl 
= and resized as a thumbnail so visitors ca 
heir drink. In two empty cast member slots, 

' create copies of a full and an empty drink. € 
| be our visitor's choice, and will be manipulated la 
| ing Lingo. 


tage 


Each time you take a sip, lower the level of the liquid 
Each type of drink is empty at a different level 

“ This code makes sure the level stops going 
down once the glass is empty 


Here, each pixel of the full-glass image is changed 


)) ~#— to the background colour down to the level 
| age that’s been drunk. The “updatestage” command 
My end repeat 


redraws the sprite between each line so the level 
falls smoothly, not in one big chunk. 


1 Select a4 


AN 


4 | Runtime imaging is one of Director 8's new features. Basically, you can edit a bitmap with Lingo while 
the program's running. We've attached the above code to a button labelled Drink. Each time the visitor 
clicks the button, we paint out a block from the top of the full-glass image with the background colour so 
the empty-glass image underneath shows through, and it looks as though the level of drink in the glass is 


going down. 


G Just for fun, we add a couple more drinking 
buttons — one for ‘sip’, and one for ‘gulp’. Each 
carries the same code as above, just with different 
sized steps. The sip option takes just a little drink, 
whereas the gulp option takes a random amount 
out of the glass. 
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Using the library browser, we attach tooltips to 
each of the drink thumbnails describing the 
drink, and use another behaviour to automatically 
change the mouse pointer to a finger whenever you 
pass it over a thumbnail. 


stage, and the full version is positio 
over it (Director 8 has a snap-to-grid op 
can place images accurately). We now chi 


| ~ 
nember(“orange").duplicate(18) 
nember ("soft") .duplicate(17) 


global level 
level=40 


5 | Of course, knowingjour readers, we thought it 
pretty essential for Visitors to be able to get a 
refill once their glass was empty. We attach an On 
Mouseup behaviour to each of the thumbnails so 
that when the user clicks the thumbnail, the drink 
pictured replaces their empty glass. 


Finally, we use another new function in the 

Properties browser to reduce the download 
time of our movie. We click Optimise In Fireworks 
and reduce the size of each of our images so our 
chatroom won't take so long to load. 


Part 3: Oh, what an atmosphere 


In order to give the Computer Arts Bar a little atmosphere, we're going to add some sounds. Director can 


now control sound with greater accuracy than ever before 


Easy listening 


You can use Lingo to layer 
sounds, and play back different. 
portions of a sound file very 
accurately. For a better depth of 
sound, we could have taken 
several party sounds, and played 
them randomly to build up the 


[2 Member| 4 Sound] [2 Cast| 

background noise. Es * = ve V Loop 

Duration: 0:00:10.000 
‘Sample Rate: 44.100 kHz 
Bit Depth: 16 bits 

| Channels: stereo 


= > | 
port the sounds into Director. It's usually 
est to start off with the highest quality 


‘ou can. Director will compress them later 
hockwave movie is produced.. 


Background noise 


Our ten second background 
sound only adds about 25K to the 
size of the final Shockwave file. 


1 | Produce your sound loops. There are plenty of 
places around the Internet where you can 
download freeware clipart sounds. If they need 
cutting to size or altering, most soundcards come 
with software to help. 


Behavior Script 28 


on mouselp ne 


nenber( 
nember( 


global level 


level=4 
end 


In the 


2eer garaen 


A que? 


corner 


At the 
- The second sound we're using is the sound of a COWES 2a 

drink being poured. All we need to do is place 
the line of code above into the script for each of the 
thumbnails the user clicks when ordering a drink. 
This will play the drink pouring sound in channel 2 
(so that it is heard over the party atmosphere, and 
doesn't interrupt it). 


Now for some fun. We want to allow our 

visitors to wander around the pub. The graphic 
above is made up of two images, the background 
rectangle, and a dot which can be slid along it. 


Next we set up another slider on to which we 

drop the Channel Pan Slider behaviour. This 
allows our visitors to move to the left or right hand 
side of the bar by panning the stereo position of the 
sound. Changes should happen in real-time, while 
the background ambient sound is playing. 


These sliders are pretty pointless — however, 
they add virtually nothing to the size of our 
movie and they're fun to play with, so why not? 


core BE 
eae e ee eee one 


We're using two sounds in our bar. The first is 
the easiest to implement. Drag the Party sound 
into sound channel 1 on the score, and in the 
properties browser, set the sound to loop constantly. 
The sound is ten seconds of bar-room hubbub, so 
the fact that it's repeating shouldn't be noticeable. 


Placing these both on the stage, we drop the 

Channel Volume Slider behaviour from the 
library onto the dot, and in the dialogue, we set the 
dot to be constrained to within the background box. 
When the movie plays, the visitor can use the slider 
to move from the font of the bar (where it's very 
noisy) to the beer garden (where it’s quiet). 


Finally, in order to make sure the sounds are 

compressed as much as they can be, we go to 
the publish settings menu, and set the audio 
compression to 16kbs/second. This compression 
would probably be very unpleasant for most 
sounds, but our general background sound doesn't 
suffer too much. 
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Part 4: Chattering classes 


The final stage for our Internet chatroom is to provide somewhere for our visitors to chat. We're going to 
do this without a single line of code. Be sure to drop in and meet up with other readers... 


ae trial 


—™ jacromedia provides a trial 


Server which you can use to test 


| thebar Stage (100%) 


your multi-user Shockwave files 
even if you haven't set up your 


Enter the Computer Arts’ 


‘ame 1 of our movie will be the log-in page. 
e we place two items. A textibox for the 
ter their name, and a button which will 
into the bar. It's good to have an opening 
s because while the visitor is making up 
Vhat to call themselves, all the images 
eded for the main bar-room can be 
the background. 


user to 
take thi 
page like tl 
their mind 
and sounds 


We can also set the name field we've placed on 

the screen as the location for the user's login 
name, and tell the Movie to advance to the next 
frame only when a connection has been established 
If you want to make more complex alterations, you'll 
need to edit the Lingo code within the behaviour. 


The second field is our output box where 

conversations will be seen. This we drop the 
Chat Output behaviour on to (remembering to use 
the same group name we used in the input field). 
We can also set a greeting for the new visitor when 
they enter the bar. 
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On the library browser, select Interne 
Multi-user to display Director's pre- 


| ‘chatroom behaviours. Everything we'll ne 


MM 
omputer Arts Bar is here, but there are aga 


haviour, which allows multiple 
raphics on a canvas. 


Our actual bar-room contains three text fields. 


Each is set as a scrolling box so that its size 
won't change when the text within it is altered. 


need oes 


‘Masianam delay between updates js aloes 
| 


vecords * 


8 | The third field is a simple scrolling box which 
contains a list of our bar's current visitors. For 
this we use the Display Group Member Names 
behaviour. Our last task is to use the Disconnect 
From Server behaviour on an Exit button, and the 
Computer Arts Bar is complete. 


Whichmenter holds the us none? [SSSR ~] 

Which siember holds the user's pasowend? [ino pseword tequied =] 

Whchmenertogotowhecomecing? [coop = 

Whechmaertogoiowbencomnscied? [en SCY 

Whichmatiertegoteweonnectiontal? [oop +] 
Pest number: ]1626 

MovelDsing [edad | 

Test mode {for IAC. POP or SMTP servers}? I a 

Encryption key fleave blank for no encryption): | 

‘Save user protile in which file: monn 1 


‘Time out connection attempt after: 


‘ weconds | 
‘Which member will display errors? | Show alert =) 


Opec rene TT ] 
‘Ser uiac na anton sam rt nan, Frome 
‘Pande nare hh wes arn ie ermine nsefiime «camagh form 
_ Mow ying then conrmchone mente? 
Uva Ranh to Sard Mevaage? 


G The first field we set as editable, and attach the 
Chat Input behaviour. The visitor will type 
here, and hit [Return] to send the message. We 
create a name for our bar (because each multi-user 
server can run many groups at once), and keep the 
rest of the settings at their default values. 


Finally, the movie is published as a Shockwave 

production. We need to do a little tweaking 
with the publish compression settings, to create a 
movie which is as small as possible without 
sacrificing the quality of the graphics. Visit 
www.computerarts.co.uk/web and tell us how we 
got on. EE 
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A most oeH, 
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In this month’s issue of 
Computer Art Special’s sister 
magazine for designers: 


FreeHand 9, Photoshop, 3D and Web 


design tutorials 
Director 8, FreeHand 9,10 
Photoshop plug-ins, LightWave 6 and 


Cinema 4D XL 6 reviewed and rated 
Packed dual-format CD 
Win Director 8 Studio! 


More from the new-look Website 
www.computerarts.co.uk 


1,2 and 3. Calypso soft drinks, Tizer and Hula Hoops. It’s not all 
work, work, work, you know. Brand New Media has created a 
number of fun and interactive sites for the younger consumer 
with characters, games, music, screensavers and animations. 
The smart and colourful Websites are often aimed at boosting a 
products profile while providing entertainment, fun downloads 
and information for the visitor. 
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Address [&] hit: //weew.tizet.co.uk/index_01.htm 
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tsometimes seems we're living in atime 
where the phrase ‘old hat’ can refer to 
something that was the ultimate in new 

i thinking just six months ago. Brand New 
Media can testify to that. With no two projects the 
same in over four years of creative multimedia design, 
new and innovative ideas are more precious than gold 
to this established Leeds company . 


Diverse portfolio 


Brand New Media’s diverse client portfolio includes 
major companies such as Heinz, Irn Bru, ntl and Bass. 
By integrating creative design and technology with 
marketing and business, they've managed to keep their 
output fresh and relevant to the client and consumer. 

“We try to get involved in all aspects of a project, the 
creative, the marketing and the business. Making a 
Website compatible with TV advertising, labelling and 
the evolution of a product or service is very important 
for us,” says Paul Mallett, creative solutions director. 
Such a strategy brings Web design right into the centre 
of a client's business plan, so that a Website is no long 
an added extra but an integral part of the company’s 
make-up. “Before we actually make a Website we 
spend as much time as necessary working through 
what the clients wants: is it customer service, 


Paul Mallett, creative solutions director. 


te 


SCAN, 


AS ga aaS 


ee 


SELECT, 


whatt beetz creature 


advertising, sales, news or entertainment? You can't 
start a project without having this in mind or it ends up 
having no goal at all.” 

The experienced gained by Brand New Media after 
more than four years in the industry has contributed to 
their strong ideas and experimental outlook. When 
they started out in 1996, Web design was restricted by 
the limited technologies available. “You couldn't really 
do a lot with the Web in those days so we were having 
to use background graphics overlaid with transparent 
images to create a dynamic feel,” says Paul. “We 
ignored all the rules that said keep all your pages to 
10K worth of graphics and keep it text based, as the 
products we were marketing needed graphics. You had 
to think of interesting ways of using things like frames 
to get interactivity where it didn't really exist.” 

Sound has also been a prominent feature in Brand 
New Media's work. Rollover sound effects and 
background music in projects such as the Calypso soft 
drink Website are often used to entertain a visitor or 
emphasise a particular feature of a site. “We've always 
tried to do different things with music and sound. With 
the first generation Irn Bru site we did had characters 
who talked which we got a lot of stick for, but we 
thought it was a great way to make it a lot more 
interactive and exciting,” says Paul. 

Constantly pushing the boundaries of what's 


“Hungry for Heinz 
but unable to find 
your favourite 

varieties locally?” 


4. “As long as it moves and it’s digital, we do it,” says 
Paul Mallett. The evidence? The Heinz Direct on-line 
store is a smooth, simple and easily navigable e- 
commerce site that sells baked beans and tomato 
ketchup to ex-pats who want a whiff of home. 

5. It’s not just your average computer that’s causing a 
stir these days; try interactive TV, digital video, 3D 
and mobile phones. Communications company ntl, 
with the help of Brand New Media, is well on the way 
to pioneering an Internet TV nation. 

6. The National Association for Crohn's and Colitis 
reflects the diversity of Brand New Media’s talents. 
With support and information for sufferers and 

The free prize draw winner families, the charity has a great chance to raise 

TOE ERSIRE OF Ona Oren awareness and funds via their Website. 

7. The Brand New Media homesite is very different to 
many of their projects. With minimal graphics and 
content, the main advertisement for the dynamic 
company is in its impressive portfolio of well known 
sites and innovative designs. 

8.The BNM recruitment drive — think you're up to it? 
“When we think about recruiting people, it’s more 
about ideas than experience. Your skills become 
quickly out of date in this industry, we encourage 
continuous learning just by getting involved and 
trying out new things,” says Paul. 
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Enjoying the many benefits of the internet is both 
easy and great value with ntl. Access is FREE, and 
internet calls are only 1p per minute whenever you 


call. Follow the link below to find out more 


Email or phone 0800 052 1234 for more information 
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Irn-Bru has always had a reputation for advertising 
that pushes the boundaries, and AG Barr's decision to 
gain an Internet presence early in the Web's 
development reflected the brand’s keen interest in all 
things new and different. Brand New Media created 
an exploratory site that set the mould for branded 
Websites from then on. 

Brand New Media, then trading as Knowledge Plus 
Solutions and based in Bradford, was talking to AG 
Barr late in 1995 and the first Irn-Bru and Tizer 
Websites appeared in Spring 1996. “This was the first 
generation of branded FMCG Websites”, says Steve 
Barrett at Revolution Magazine. “They set the trend for 
sites of this type”. 

Simon Wadsworth, MD at Brand New Media, points 
out that the external advertising for these sites has 
only ever appeared on cans of Irn-Bru and Tizer. In 
1996 it was groundbreaking for a branded site to be 
graphically based and exploratory, encouraging users 
to find pieces of brain to enter a competition. 
Nowadays of course these sites are two-a-penny, but 
Irn-Bru remains ahead of the game by tapping 
directly into the source — how people use the Net. 

The first site was not replaced but updated. Using 
mini-stories to form a rambling soap opera the site 
developed into a huge sprawling mass over its first 
two years. Then in 1998 Irn-Bru went for a change and 
a site comprising only three main sections appeared. 
With a sleeker look, the Irn-Bru site encouraged users 
to send in their digital creations and displayed them in 
a surreal on-line talent show, mirroring Irn-Bru’s 
sponsorship of Chris Evans's TF/ Friday. A smaller part 
of this site was developing custom on-line pranks to 
be e-mailed to friends and this section proved 
massively popular. 

Due to the success of the Irn-Bru wind-ups, the 
latest incarnation of the site was born a year later to 
great effect. And in December 1999, Irn-Bru’s 
Ultimate Wind Up Website took the on-line world by 
storm. The site points users at a vast number of on- 
line pranks to play on friends and enemies. 

Says Andrew Brown, Senior Designer at BNM: “We 
really wanted to get into the look of those now-famous 
Irn Bru posters. Using the black and white images 
achieves this easily, and the other elements were 
thrown in to maintain that anarchistic quality. The Irn 
Bru site looks alive, as if there are some proper 
sinister goings-on behind the interface...” 

With the user sessions now hitting over 40,000 per 
month and still rising, Irn-Bru has taken the principles 
of modern marketing techniques and used them to 
great effect. 

You can check out the current Irn-Bru sites at 


[w] www.irn-bru.co.uk 
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1. Leeds-based event design and production agency, Synergy, worked with Brand New Media to showcase their range of 3D and visual 
capabilities in a subtle, slick and innovative Website. Back on solid ground, Brand New Media and Synergy together won Best Stand 


Award at the Marketing 97 fair. 


acceptable and credible has contributed to the 
successful expansion of the company and its wide 
range of achievements. “If there's one thing we've 
learned,” says Andrew Brown, senior designer, “it’s that 
you've got to be creative and try different ways of 
getting the message across. Even if they don’t work now, 
they might do later on.” 


Varied background 


As a growing company with 40 staff and new offices 
in London, Brand New Media does most aspects of a 
project in-house. Teams of designers and programmers 
who specialise in graphics, database, music or e- 
commerce take on the different parts of each site. 
“Over time we've done just about everything, including 
pure programming, games, video and touch screen 
applications. All our designers come from very varied 
backgrounds, including film and teaching; as long as it 
moves and it’s digital we do it,” says Paul. The contract 
with ntl involved a considerable amount of work on 
their Internet TV platform. According to Paul, “With ntl 
the approach was very different, we had to learn how to 
get the graphics and text right for television, a very 
different way of doing things. The variety we get from 
our clients is huge.” 

The company’s designers often have the 
programming skills to match, so that projects aren't just 


“You've got to be creative and 
try different ways of getting 
the message across. Even if 
they don’t work now, they 
might later on” 


passed from one member of the team to another with 
little interaction. Separating creativity and technology 
is something they definitely try to avoid. “Working 
together means you come out with the best ideas, a 
programmer who's thinking creatively from a 
technological perspective can be just as rewarding as a 
designer working within their technological 
boundaries,” says Andrew. 

The company is now starting to expand into Europe 
which involves an altogether different strategy. “We 
want to get out and about and start new projects on the 
continent, it’s a case of seeing what works over there,” 
says Paul. “We've got a desire to push it all the time, in 
Europe and the UK. Each time we do a project we'll try 
something new so we always have new skills to bring to 
the next project. We take what we learn from the 
corporate projects and apply that to the fun projects 
and vice versa.” 


Constant liaison 


Back on British soil, Paul and Andrew are doing 
their bit for up-and-coming new media designers and 
programmers by getting involved in education. “One 
thing we feel is important is constant liaison with 
universities and colleges who are offering multimedia 
and design courses,” says Andrew. “It’s difficult enough 
for companies in the centre of the industry to keep up 
with new developments and techniques, so for 
education and training to follow the latest trends is 
impossible. We try to give lectures and seminars at 
nearby universities when we can but you can imagine 
how time is precious around here!” 

Brand new media it may be, but the ideas are 
comfortingly old-fashioned: creativity, talent and 
striving for the best. 


Cream of the crop 


Brand New Media reveal the secrets behind the Heinz Salad Cream 


Website, and how to turn an old favourite into a youth icon. 


a First the brainstorm process takes place. The 
primary objective is to position Heinz Salad 
Cream as an exciting, modern, vibrant product that 
will make people try and remember how delicious it 
is. This involved sketching out ideas for characters 
and the creation of a mood board as well as laying 
out the sort of thing we wanted to achieve. 


< 4%, 
4, 


The key to the whole site wasn't fancy 3D 

renderings, a funkadelic soundtrack or 
characters with attitude and panache, but the 
humour that was applied to the content. “It's like a 
movie — if you don't have a great story you're on to 
a loser." 


The final stages of the site left the team 

responsible working around the clock to finish 
the initial phase. The site is currently in constant 
development. “We're working up to phase two at 
the moment. There has been a massive amount of 
user feedback, hit levels are through the roof and 
people seem to love the site and the product it’s 
advertising. We're going to address a few issues, 
mainly about copy and functionality, then it’s phase 
two. We've still got some cool prizes to give away 
and some great ideas for the new sections, so 
everyone's really looking forward to the next phase 
of development.” 


& The look and feel was mocked up and 
developed to give us the final images that 
would dictate the whole look of the site. A cross 
between adult 2D characterisation and a 
psychedelic play on the famous Heinz keystone was 
used in conjunction with 3D elements created in 3D 
Studio MAX. 


2 
8 | There was a very short amount of time to 
complete stage one of the site in time for the 
release of the TV ads. Small teams were given 
charge of different sections of the site and 
developed them side by side. Brand New Media 
created a branding toolbox of icons and imagery to 
keep a consistent feel throughout the site. 


Brand New Media used Poser and Flash to 

create the cartoon characters that populate the 
site. As a large number of characters had to be 
drawn swiftly all the characters’ poses were set up in 
Poser, laying out the proportions for the artist. 


tastes supreme 


3 | Brand New Media worked closely with Heinz's 
other agencies involved in creating the TV ads, 
poster campaign and on pack sales promotion. “It's 
great getting together with creative people from 
different agencies and backgrounds and attempting 
to integrate the message for each different media". 
The Website attempts to draw on elements of all the 
other campaigns whilst keeping a unique identity 
that would be embraced by the Net generation. 


G A number of different technologies were used 
to achieve the objectives required for each 
section - from HTML, DHTML and JavaScript to the 
use of Flash and Shockwave for animation, games 
and music. Cookies check whether users have been 
in certain sections and make decisions as to whether 
graphics should be preloaded or not. “The decision 
to go full screen and really immerse the user in the 
site made the whole thing feel like an individual 
application, not your run of the mill Website." 


9 | These were imported into Flash and each 
character drawn over the top of the Poser 
images using a graphics tablet. “Hairstyles, features 
and items of clothing were inspired by people who 
happened to wander past, so a few people in the 
office ended up looking at themselves when they 
were testing the site." EEE 
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Adobe's new animation package for the Web 
has critics and designers divided. Try our tutorial 


and decide for yourself whether it's the real deal 
or just a Flash in the pan... . 


ome enthusiastic soul has 
registered the domain name 
FlashKiller.com for a site 
devoted to Adobe’s new Web 
graphics and animation package, 
LiveMotion. That may be a bit premature. 

LiveMotion may export to Macromedia's 
Shockwave Flash format, but it’s quite a 
different animal. Aimed more at creating 
splash pages, text animation and 
optimising bitmaps than interactivity, 
LiveMotion is easy to pick up for Adobe 
veterans and newcomers alike. 


This ease of use is centred around a 
less linear approach to animation than its 
obvious rival. Objects on the page in 
LiveMotion remain easy to edit even after 
you've applied several transformations. 
You can change individual aspects of an 
animation - a rotation here, a rescaling 
there - anywhere along the timeline 
without it affecting any other aspect. 

So here’s a quick tour of LiveMotion, 
including those animation and interaction 
features. If you’re used to Flash give it a go 
— you might be pleasantly surprised... 


~~" Use the Colour Schemes palette 


\ 
ii 
‘i 


Part 1: Drawing tools 


Firstly we'll discover how to get the max from LiveMotion’'s impressive tool set, 
and learn how working with layers enables us to build complex shapes... 


Colour schemes 


to find colours that are 
complementary to your chosen 
foreground colour. 


Quick change 


To change the background colour 
of.your document, you don't have 
to mess with preference settings, 
just click away from the — 
document window to deselect all 
objects and chose a new 
background colour from the 
program's toolbar. 


LiveMotion’s tool set looks familiar. The 
company continues its policy of sharing 
interface elements among the family, so you'll come 
across features that LiveMotion has in common 
with ///ustraton, ImageReady, Photoshop and even 
. In the preview versions we 
e had been tweaked to fit in with 


+ buttons! liv @ 100% 


4 | With the Outline layer selected, go to Window 
>Layer to make sure the Layer Properties 
Palette is open. Set the layers width to 4 in the Layer 
tab. With the object still selected, go to the Colour 
tab and change the foreground colour to black. 


a 
aS 


The Pen Tool in LiveMotion creates vector 
paths in a similar way to the Pen tool in 
Illustrator or Photoshop, but it's less complex. 
Clicking on a blank piece of canvas creates a new 
point, while by default clicking on an existing closed 
point deletes it. 


8 | [Ctrl/Command]-click to end a path, or 


gs Like Flash, the drawing palette leads with a 
collection of primitive shape drawing tools. In 
the ease of LiveMotion you have access to 
Rectangle, Rounded Rectangle, Sphere and Polygon 
drawing tools. When you place a drawing on screen 
it automatically becomes an Object, with its own set 
of properties and layer structure. 


5 | Go back to the Object Layers palette and select 
the Circle layer. Go to the 3D tab (use the 
Window>3D menu option if it’s not visible). In the 
3D tab set the 3D style to Straight, depth to 4, 
softness to 2 and the Edge type to Button. 


7 3 


[Alt/Option]-click to edit an existing point. 
Clicking along an existing path adds a new point. 
You can also edit paths using the Pen Selection Tool. 


buttons) liv @ 100% 


a Layers in LiveMotion allow you to build 
complexity into you shapes. Begin by drawing 
a simple circle using the Sphere tool, holding down 
Shift as you drag. Go to Window>Object Layers to 
make sure the Photoshop-style Layers list is 
available. Click the Duplicate Layer icon in the 
palette. Rename the top layer to Circle and the 
bottom layer to Outline. 


G If you wish, you can save this combination of 
layers and effects as a reusable Style. Open the 
Styles tab and, with the button object selected, click 
the New Style button. In the dialogue that appears 
enter a unique name for the style and check Layers. 
To apply the style to another object, select the 
object in the document window, choose a style from 
the list and select Apply. 


9 | In common with primitive shapes, shapes 
created with the Pen Tool can either be 
rendered in Outline or Filled mode (using the 
Properties tab), and can be made up from any 
number of Layers. You can also apply Styles to 
elements drawn with the Pen Tool. 
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Part 2: Basic animation 


Now we'll take our first steps using LiveMotion's animation tools, and create a simple 
production which applies a transformation to an object 


Cautionary tale 


? = eS ‘Although LiveMotion lets you add 
Lool 3D effects, drop shadows 
and anti-aliasing to objects, 


cS as OS 


o drawn 

ts extends to the animation metaphor 
be LiveMotion. We'll look at how it 
ting a very simple animation that 
ormation to an object over a set 
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45 Click on Transform inthe Timelineuinder the 
listing for the rectangle we created The list that 
appears contains the properties of the object we can 
animate over time. Click the stopwatch icon next to 
Rotation. By default, the playhead for the timeline is 
at 00s (‘s' for seconds). When you click the Rotation 
stopwatch a keyframe is placed at that point. 


By default, your animation only plays back 

once. You can loop the entire composition with 
the animation settings, but we're going to use 
Behaviours to set up some more complex 
interaction. Set the playback head or Current Time 
Marker back to 00s. Click on the Edit Behaviours 
icon in the Behaviours section of the Timeline. You'll 
find it under Composition Attributes. 


Click and drag the playhead in the timeline to 
‘6f' for six frames — the default frames. per 
second rate is 12, so this is half a second. Go to the 
Transform tab and in the Angle box type 360. Several 
things happen; a new keyframe is added at frame 6, 
the timeline object length indicators change to show 
that the animation lasts for six frames and the 
rectangle on screen rotates 360 degrees... 


8 | In the Edit Behaviours dialogue type ‘loopstart’ 
in the Label box, choose Play from the Add 
Behaviours dropdown, then click OK. Move the 
playback head to 6f and click the Edit Behaviours 
icon again. Select Go to Label from the Add 
Behaviours dropdown and choose ‘loopstart' from 
the ‘label:' dropdown. 


[Ctrl/Command]-T to open the 

You should see that an object ca 
similar to Green Outlined Rectangle h 
been added. Click the arrow alongside 


G You can animate amy transformation attribute 
for an object in this way, including its position 
on screen, its opacity and horizontal and vertical 
skew. Using the Layer property on the timeline, you 
can also animate changes in object colour as well. 


Rewind the animation back to the start and 

save your work. To quickly preview the 
animation you've created, go to the Toolbar and 
select the Preview Mode icon at the bottom right of 
the bar. You'll discover later that you can't preview 
all interaction directly in LiveMotion, but simple 
animations should playback fine. 


Part 3: Animating text 


Let's apply LiveMotion’s talent for animation to text, and create an attractive rotating 
logo — just the thing to add a professional touch to your Website 


Other formats 


the formats LiveMotion supports 
for export. You can also save files 
as PNG, Photoshop PSD, JPG, 
GIF and animated GIF among 
others. 


Photoshop 
integration 
You can import Photoshop-native 
PSD files into LiveMotion with 
each layer as a separate object. 


& Go to the timeline and stretch the composition 
length indicator to 01s. Click and drag the 
behaviour we inserted at frame 6 to 01s, along with 
the keyframe that we created when we applied 
rotation to the green rectangle. The result here is 
that the length of the animation we've created has 
been doubled, without having to redo the 
animation or create new behaviours. 


Open the Transform branch under the text 
MW object entry in the timeline, and click the 
stopwatch icons next to scale and rotation. Move 
thé playback head to 6f. In the transform tab, set 
the angle entry to 360. In the width and height 
boxes, divide the existing numbers by two and type 
them in. 


With the new text still selected, choose 

Object>Break Apart. Go to the Timeline, all the 
individual letters in the new text should already be 
selected. Click on the arrow next to the top object 
(which should be something like Green |) and click 
on the Object Opacity and Scale stopwatches in the 
Transform branch. 


PR The reason for this reorganisation is so that we 


can insert some animating text in our 
ument — one of the most popular uses of vector 
ation tools. Begin by selecting the text tool in 


5 | Move the playback head baek to 00s and open 
the Object Attributes branch in the timeline 
below the text object entry. Click the stopwatch icon 
next to the item labelled Text. Move the playback 
head to 6f. Double-click on the text object in the 
document window to edit it. Change the text in the 
box from ‘rotating’ to ‘interaction’. 


re} 


8 | Move the playback head to 01s. In the Opacity 
tab set Object Opacity to 0. In the Transform 
tab, multiply the currently entered figures by six and 
alter them. Rewind the animation to the beginning 
and select the preview button to view your 
impressive handiwork. 


Position the text object as shown, then go to 

the Timeline window. Choose 
Window>Timeline if it’s not already open. You 
should see an object called something like Green 
Rotating. Collapse the menus for all the other 
objects and open the tree for the text object by 
clicking on the arrow next to its name. Set the 
playback head to 00s. 


Set the duration bar for the text object so that 

it ends at 6f, then move the Current Time 
Marker to 6f. Select the text tool and type in 
‘interaction’. Set the other attributes to match the 
existing text object, then line up the new text 
exactly over the old. Use the arrow keys to nudge 
the text object a pixel at a time if necessary. 


g To reuse this animation sequence as a Style, 
make sure all the letters are selected, then 
choose Object>Group. Go to Window>Library, then 
drag the selected object to the Library. Give the item 
a name. To reuse the item, you either select the 
object in the Library and choose Place, or drag and 
drop it into position. 
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Part 4: Buttons and interaction 


LiveMotion is superb for creating hassle-free buttons, rollovers and other interactive 
Web elements to dazzle visitors to your site 


, “The final release of LiveMotion 
pnables you to set individual 

compression parameters for 

individuakobjects ina file,even if 


- fi 
ee Though lacking some of the advanced scripting © 
elements found in other apps, LiveMotion lets 


Double click on the independent timeline icon 


7 button between the tree arrow andthe name 


you trigger animation using a combination of 
rollover actions and timeline behaviours. In this 
example we trigger additional animation in the 
rotating rectangle we created earlier. 


, the menu, go to Timeline>Time Independent. 


[2 | Select the rectangle in the document wind 


[Ctrl/Command]-T to open the Timeline 
The rectangle should be selected in the timeline. 


label of the animated rectangle in the Timeline 
Window. You are taken to a new timeline window 
containing an independent timeline for that group. 
Our first task is to create an independent animation. 


Tt 


Se 


ae 


8A ST PS SS ER AEE SS PA ss 


int 


ce 


es te ee Say 


Click the Behaviours icon and type ‘go’ in the 
Label box and choose Play from the Behaviours 
dropdown. Click OK and move the playback head 
to 01s. Click the Behaviours icon and just Go To 
Label from the dropdown. In the Label dropdown, 
choose Pause. 


4 | Open the Object Attributes branchiand click on 
the Shape Resize stopwatch icon. Move the 
Current Time Marker (CTM) to 01s. Openithe 
Transform tab and type in 50 for height and 50 for 
width. This creates the animation - to make it 
interactive we have to add behaviours. 


Fr et Ld 


5 | Move the CTM back to 00s in the independent 9 
timeline. Click the Behaviours icon and type 

‘pause’ in the text box marked Label. Choose Stop 
from the Behaviours dropdown, then click OK. 
Move the CTM to the next frame. 


ee A 


Select the button object we created right at the 
“9 beginning. Go to Window>Rollovers and make 
sure the Rollovers tab is open. Click on the New 
Rollover State icon at the bottom of the window to 
make an Over state for the button. Edit the colour 
of the selected button in the document window. 


With the Over state still selected, click on the 9 | To preview the finished animation with the 

Edit Behaviours icon in the Rollovers palette. rollover interaction, choose File>Preview In... 
Choose Go to Label from the Add Behaviours drop to see the file playback in Shockwave Flash format 
down. Select the name of the animating rectangle in your browser. Though you can preview most 
from the Target dropdown and ‘go’ from the label actions within LiveMotion, nested animations only 
drop down. seem to work when you export them first. FEES 
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la Welcome 


WAP represents the future of the Internet, we're told, but is it 
a case of one step forward and three steps back? 


he future is wireless. It’s a future in 
which you can always access the Net, 
and it’s a future in which credit cards 

i are as obsolete as cash. If the adverts 
are to be believed, it’s even a future in which, even 
deep in the outback, you can access a database of 
snakes to see if the one that just slid up the leg of 
your trousers is poisonous or not. But how much of 
that is just hype, and how much is reality? 

It may sound like a sound effect from an episode 
of Batman, but WAP actually stands for Wireless 
Applications Protocol and it’s a new open standard 
for the encoding, transmission, collection and 
display of Web-like data. Content for WAP clients 
is written and delivered using WML (Wireless 
Markup Language), which is a derivative of XML 
(Extensible Markup Language). 

Although WAP uses the Internet as a 
distribution and storage medium, it’s really a 
massively condensed 
version, and is not 


document includes a postage stamp-sized black 
and white graphic! 

The reasons for this are fairly obvious — 
because all WML documents have to be 
displayable on a mobile phone screen, there’s no 
room for fancy features. In any case, another fairly 
serious limitation is the actual rate at which mobile 
phones can receive data — their bandwidth. There 
are a few mobile phone transmission standards 
around the world, but none of them provides data 
rates anywhere near the v.90 modem speed of 56k 
per second. This means that it wouldn't be 
practical to create large complicated documents, 
even if the user had the means to display them. 

If you've ever developed Web pages which are 
intended to be viewed by users on a variety of 
platforms, running different browsers and different 
browser versions, you'll already be familiar with 
the difficulty of creating documents that look the 

same in every 
situation. You need 


remotely suitable for Don it expect to see sites detailed knowledge 


the majority of Web 
services. Although 
there are HTML to 
WML converters, none 
but the skimpiest sites 
would stand the 
translation, and by and large, WML sites have to be 
specifically written for WAP browsers. 

The WAP standard has been formulated by a 
group of over 300 companies called the WAP 
Forum. It’s an open standard, which means that it’s 
not owned by any one company, and the 
specifications are freely available to any 
interested parties. 

Many things restrict the versatility of WAP 
services, but the greatest limitation is the 
capabilities of the client machine. The WAP forum 
specifically wanted to avoid making assumptions 
about the type of machine that would be used to 
access WML documents, and so the standard has 
been made as open as possible in order to 
accompany everything from the lowliest mobile 
phone, to the most powerful PDA or Portable 
Digital Assistant — an electronic organiser. This 
means that all WML documents have to conform to 
the lowest common denominator, which is little 
more than a glorified version of your mobile's text- 
only SMS or Short Message Service. For this 
reason, don't expect to see extravagant WML sites, 
with vibrant graphics and kicking sound. In the 
world of WAP ‘multimedia’ means that the 


with vibrant graphics 
and kicking sound 


of the limitations of 
each browser and the 
safest solution is to 
create very simplistic 
documents devoid of 
such niceties as Java, 
frames or even tables. Under WML, the situation is 
infinitely worse because a developer can make 
absolutely no assumptions whatsoever about the 
display capabilities of the user’s machine, except 
perhaps that it will be capable of displaying at 
least one line of text and that the user will be able 
to navigate around larger documents. 

WML authors do have the capability to query a 
WAP device in order to find out what it is. They can 
then customise their code accordingly, changing 
graphics, line lengths, text formatting commands 
and even button assignments according to the 
device from which the pages are being accessed. 
This is definitely not the recommended option, but 
if you don't do this, you could find important parts 
of your message being automatically clipped on 
devices with smaller displays than your baseline 
assumption. The only trouble with this approach is 
the sheer number of WAP models that are 
available. There are already dozens of mobile 
phone, PDA and organiser manufacturers, each 
offering many different models. That means that 
the potential number of different screen 
permutations will run to hundreds if not thousands 
of different varieties, and accommodating all of 
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Writing a program in WML for 
WAP sites isn't tricky... 


reating a WML program is much like 
creating a page in XML. However, because 


multiple pages (known as cards) are stored 
in a single WML file (called a deck), the pages are 
referenced somewhat differently. In fact, it’s not 
unlike using HTML bookmark anchors (#) to jump to 
specific points in a page. 

Also, because of the various limitations imposed 
by WAP clients, WML has no support for Java. WML 
does support monochrome bitmaps, and you can 
obtain an upgrade for Photoshop to save files in the 
correct format. 

Here's the code for a couple of cards. Note the 
<p> tag, which stands for “paragraph” and delimits 
any text to be printed to the screen. The <do> tag is 
the only other tag that can be included on a card and 


is used to process button actions. 


<?xml version="1.0"7> 

<!DOCTYPE wml PUBLIC “-//ComputerArts//DTD 
WML1.1//EN* 
“http://www.Futurenet.co.uk/DTD/wml_1.1.xml'> 


<wml> 


<card id="Intro™ title="Intro"> 

<p> 

<do type="“accept" label="More Info"> 

<go href="#info"/> 

</do> 

Welcome to our site. We hope that you enjoy the 
experience. 

</p> 

— 

You can learn all about Future Publishing's many 
magazines at this site. 

</p> 

<p> 

To e-mail us, select the “Contact Us" button. 
</p> 

</card> 


<card title="For more info“ id=“info"> 
<p> 

Visit us at www.Futurenet.co.uk 

</p> 


</wml> 


Although you can use such things as bold text or italics, 
these are not universally supported by all devices. 
When it comes to WML/WAP you can more or less 
forget any hopes you had of creating stylish sites — 


it’s content, content, content. 


those with ‘If... Then...’ programming is likely to be just 
completely unworkable. 

The innate simplicity of most WAP client devices 
means that WML pages will be far simpler in terms of 
content and the way that it’s presented, than current 
Web pages. This leads us to the natural question — 
what sort of material will WML be used for? Well, it’s 
an interesting one. Developers talk about booking 
tickets, doing on-line banking and finding out about 
the weather. For instance, on the train home you could 
dial into a central booking office, check all the movies 
that are on within a ten-mile radius of your home, 
choose one that you like, book seats and pay for them 
all without saying a word. The voiceless aspect is an 
added benefit for anyone who feels conspicuous 
speaking in public on a mobile, or for those of us who 
are irritated by those people who still think that owning 
a mobile is a status symbol that needs to be advertised 
by using one in a loud voice on public transport... 

Of course, e-commerce is already in massive 
growth and the use of WAP compliant devices is likely 
to provide a significant spur, because you no longer 
need a separate credit card when paying for things on- 
line. SIM cards are unique to each user, and used in 
conjunction with a password authentication system, 
you can order goods and services on-line and receive 


the bill via your mobile phone statement. The WAP 
standard has provision for security in the form of an 
encryption layer that will encode your communications 
to prevent them being intercepted and your private 
details being extracted. 


Planet mobile 


There's great impetus upon mobile phone-based 
commerce to succeed for several reasons. The first is 
ubiquity — there are about 300 million mobiles in use 
worldwide, and it’s estimated that by the year 2005, 
there will be one billion mobile phone subscribers — 
that’s over 10 per cent of the planet’s population... 

The second reason that so many businesses support 
WAP is its relative ease of use. The potential user base 
is much more at ease with a phone than with a 
computer. Billions of people are familiar with phones, 
and the 300 million mobile phone owners represent 
twice the number of computer Internet users. The 
Internet is a seemingly limitless source of revenue, and 
WAP gives companies an additional, omni-present, 
user-friendly way for their customers to access it. 

Perhaps one of the most interesting features of WAP 
is only accessible when you access services via a 
dedicated WAP gateway — the part of the system that 


Because anyone can create a WAP site with relative ease, there are at least 80 
sites already. Here are ten for you to dial on your WAP-compliant mobile... 


BBC 


123 Jump Boxman 
www.123jump.com/wap www.bbc.co.uk/mobile/mainmenu.wml http://wap.boxman.com 
Markets, quotes, stocks & shares The Beeb on the Net Buy CDs by mobile 


Hitchhiker Focloir The Holy Bible 
http://wap.h2g2.com www.topstudy.com/wap/index.wml http:// wap.mobible.org 
The Hitchhiker's Guide to Irish/English English/Irish A mobile phone version 
the Galaxy! , dictionary. of the Bible 


connects your mobile phone network to the Internet. 
The gateway can discern the phone number and 
location of the caller, which means the information 
available to a caller can easily be customised. 

To go back to the cinema ticket example, the central 
booking office could easily offer to list films within a 
specified radius of the phone's current location, or of 
its owner's home town. What about booking a 
restaurant? Or finding a local 24 hour plumber? The 
possibilities of an information service that adapts itself 
to your current location are certainly exciting. You 
could even access a database and check your diary 
when you're out of the office. 

Mobile phones are already pretty sophisticated, but 
in order to use the Web, they’ll need to include a 
compatible microbrowser. The actual operating system 
on your WAP device is irrelevant provided the browser 
is fully compliant. However, the WAP browser 
specification is very fault-intolerant, unlike most 
computer browsers. This means that code needs to be 
written with greater care because even basic syntax 
errors will generate fatal faults. 

Although current bandwidth and battery life issues 
make it infeasible to run more complex browser 
software or provide true HTML support, Microsoft 
predicts that this limitation will soon be overcome, and 


it’s touting its Windows CE operating system as the 
ideal solution for the future of WAP devices. Phone and 
PDA manufacturers say that this is an unrealistic 
assertion from Microsoft, and that these limitations are 
likely to exist for a long time yet. 

While the language used to construct WAP sites is 
similar to existing languages, the actual physiology of a 
site is different. Existing sites consist of multiple 
pages, of virtually limitless size, each of which may be 
referenced individually with a HTTP address. Mobiles 
may have serious memory limitations — the Nokia 
7110 can only handle documents up to 1.4K in size — 
So pages are created according to a different model. 

Because WAP devices cannot display large amounts 
of data, and even short sentences require scrolling, it’s 
better to think of a WAP site as containing a series of 
cue cards, including graphics, each bound into decks 
of related material. When you go to a site, a deck is 
loaded in one go, enabling you to navigate around 
quickly without the constant need for new downloads. 


Dialling the future 


So is WAP going to be the amazing thing everyone's 
making it out to be? The answer is a resounding yes... 
and no. The truth is, there’s going to be two flavours of 
Websites — vanilla and WAP compliant, with many 
companies maintaining both. The limitations on the 
amount of data you can download and view in one go is 
a significant limitation, although the fact that there's a 
WAP version of the Bible only goes to prove that where 
there’s a will, there’s a way. However, it is ironic that 
just when the Web has become a truly multimedia 
experience, developers are getting all excited about a 
version that can only display monochrome graphics 
and a couple of lines of text at a time... 

In the short term, what we'll see is a whole new way 
of accessing information and making choices that 
doesn't involve lots of typing or reading. For most of us, 
it’s likely to remain a gimmick more than an essential 
tool. Like mobile phones themselves, you can live 
without it, but life's a lot easier with it. 

In the long term, it seems inevitable that wireless 
devices will achieve the same capabilities as existing 


~ Sinead 


Ten great applications for WAP 
that may or may not appear on 
your mobile soon... 


t's already been pointed out that most of 
the great applications for WAP probably 


haven't even been invented yet. Just as 
the great Internet money spinners, like on-line 
games, electronic auctions and e-commerce were 
not imagined at its conception, chances are we're 
going to see some entirely new opportunities which 
are only made possible by the existence of WAP. 
Nevertheless, there are some great things already 
available. We've compiled a list of the most frequently 
touted schemes, and added a few of our own just to 
get you thinking... 


On-line banking: check your accounts, 
make transactions, and pay your (no doubt huge) 
phone bill — all on the bus home from work. 


Ticketing: change your restaurant reservation 
when you realise the meeting you’re in is going to 
over-run by a couple of hours. 


Sports summaries: find out if your team 
won in the middle of the dullest meetings. Remember 
not to cheer excessively when they score. 


Weather reports: find out whether to put on 
Speedos or a raincoat before the train arrives at your 


holiday destination. 


Share prices: have your phone call you to 


warn you when a pre-determined price movement 


The Guardian 
www.newsunlimited.co.uk/wmt 
Home of The Guardian newspaper 


Curryhouse.net 
www.curryhouse.net/wap 
A list of UK curry houses. 


computer browsers, enabling them to access regular 
multimedia HTML pages. The only question is, how 
much further will the Web have evolved by then? EEE 


occurs. Buy, buy, sell, sell, etc... 


Stock access: ata customer's site, you can 
check your company’s inventory before promising 
that next day delivery. 


Interactive reference: find out just how 
serious that nasty rash could turn out to be, before 


going ona second date. 
WML files use different MIME types to the standard 


Internet data types — JPG, BMP etc. These are not On-line manuals: right, so how exactly do 


UK Entertainment Centre Mickes Links A . 

wuientieDlicontidmcwil maermedi tie cna? complicated to implement, but you do need to be you fly a Boeing 747 again? 
Clubs, comedy, theatres and Add tunes to your aware of them... 

music events mobile phone 


Entertainment: gota few hours and lots of 
phone credit to spare? How about on-line hangman? 


text/vnd.wap.wml 
application/vnd.wap.wmic 
application/vnd.wap.wmlscriptc 
image/vnd.wap.wbmp 


Dial-a-floozy: ina foreign city and feeling a 
bit lonely? Press a few buttons and find an ideal 


dinner companion in no time. 
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From site management through complex Web 


page creation to adding JavaScript and DHTML, 


Dreamweaver 3 is the perfect tool for the job 


any people would argue that 
Macromedia's Web editor 
Dreamweaver was the first 

| WYSIWYG package which 
did exactly what it said on the tin. Finally, 
someone had produced an editor that 
worked properly, and came stacked with 
lots of labour-saving features and (for the 
most part) didn't have any of those 
irritating little foibles. 

Version 2 of Dreamweaver was even 

better, as Macromedia addressed a lot of 


the feedback they had from users of the 
earlier versions of the software. And with 
version 3, Dreamweaver is as close to 
being a perfect tool for Website 
development that you could find — at 
least, that's what many users will tell you. 
In this tutorial we'll cover everything 

from setting up your site correctly to 
Dreamweaver's built-in DHTML features. 
So if you've yet to sample the delights of 
this well-regarded package, now might be 
a good time to start. 
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Switching on site caching now 


Part 1: Getting started and the Dreamweaver Library 


The first steps towards building our site, including designing a navigation bar 
so that visitors can easily find their way around 


Site caching 


will make site maintenance a lot 
easier later on. 
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our site properly in the first place 
big difference to site management 
ine Sites from the main pull- 
Site Files window to get started. 
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4 | If you're creating a site from scratch, you'll see 
a pretty blank-looking screen when you finish 
with the Define Sites window — to get started 
choose New File from the File menu and give ita 
name. Since every site needs an index, that’s what 
we'll call this first file. 


File name: 


as 
Files of ype: [AN Files") Ba Canc | 


URL: index. htm 


Relative To: [Document | index.html 
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Go back to the Site Files window, and create 

four more new pages for our menu options to 
actually link to. Next, select each of the five bits of 
menu text, and click on the Browse for File icon 
beside the link text in the Properties window. Select 
each file in turn, until you've done all five. 


Web Server Indo 
Check InDut 


Stellaeleunceste 
LncalRodt aller |C\webdevidevewcas SSS 
F Betvesh Local Fle List Automatically 
Only options above ate requied for loos! whes 
Link Management Options. 
HTTP Adit fist: foe thebob decon.co.uk/oa/ 
cater LS eae ese 
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Dn the Local Info page set up your site name, 
local root folder and the ultimate URL 
where the site will end up. Clicking the Cache tick 
box ke moving files around or deleting them 
a lot less ofa chore later on. 
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Let's build a simple navigation m@fu for our 

new site. To get started, click on Insert Table in 
the Objects toolbar. Define a simple table with one 
row and five columns, and set it to be 95 per cent in 
width. Set zero cellspacing and cellpadding for now. 


10% Nant) - Uioamwnaver 
Tet Commands Site Window Help 

Bage Properties. Chin! 

¥ Selection Properties CilsShilte) 
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Updale Curent Page 


Update Pager. 


Select the entire navigation table — to do this 

easily, click somewhere in the table, and then 
on the <table> text which appears on the bottom of 
the editing window. Now, select Add Object to 
Library from the Library option on the Modify 
menu, and call the new library item ‘navigation bar’. 


Web Server Ino 
Server Scones: [FT 
FIP How 


Host Drectoyy, 


[rehab 


bogre 
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T Use Passive ETP 

7 Use Feewat fs Preferences) 
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On the Web Server Info page, fillin the FTP 

details for your Website - you can change or 
add these later if you don't know them. Don't worry 
about the other pages of the Define Sites window 
for now. 
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6 | Drag the mouse pointer to select all the table 
cells. Use the Properties window to change the 
background colour of the table cells, the font family 
and size of the text and also Centre Align the 
contents of the cells. To change the colour of the 
text, select each word individually. 
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Next, go into each of the other four pages in 

turn. Make sure the Library window is visible 
(use the Window menu to turn it on if it isn't). Now, 
drag the ‘navigation bar’ library item from the 
Library window to the start of each page — and as 
easy as that, you've added navigation to your site. 
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Part 2: More fun with Tables 


Tables are a breeze with Dreamweaver, and you have the power to adjust 
individual cells if you're a perfectionist... 


Neat and tidy 


ss * Use WYSIWYG tools to define 
Jour tables roughly and then dive 
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» kEIOL, Kelvecica, 
) ACLel, Helvetica, 


idk, med Tables are good. Creating neatly formatted output is 3 must, design-wise. Dreamweav 
: ? , ‘makes doing this easy 


‘Tables are easy.” This is the Way WVSIWVG editing Was supposed to be" easy! drag aq 
rop control over the look and feel of your web pages. 


took about 2 minutes to create! 


‘Tables’ are quick,” stiws 


‘Tables are finit) Weil, this inight be Vaking things @ bit too far 
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</center> 


Add some contentto your table. Obviously, 
5 | Choose HTML from the Windows menu to when you're building a real site, you'll want to 
display the source code that Dreamweaver has _use slightly more helpful content than this (oh, and 


ee a | ST | se 


4 | If you're a perfectionist you can adjust 
individual cells by clicking in them and using 


the Properties window to alter height, width (to generated. Note that this isn't a mere ‘view source’ probably lose the nasty purple’n'blue colour 

pixel level), horizontal and vertical alignmentandso _ option such as you'd get with a Web browser—you scheme). Of course, text included could be linked to 
on. Doing this in some WYSIWYG editors would could actually do all of your Web editing in this other pages, and you can even easily embed tables 
generate very messy code — but not in Dreamweaver. _ window if you liked. within tables. 


Ser 2000 «13-2905 73K GMT Doig Tene 


‘This report covered 7 files. 


‘Microsoft Internet Explorer 3.0 
Microsoft Intemet Explores 4.0 
‘Netscape Nawgator 2.0 " 
Netscape Navigator 300 


Creating neatly formatted output is 2 must, design-wise. 
Dreamweaver makes doing thes easy 


This is the way WYSIWYG editing was supposed to be - 
easy, drag and drop control over the look and feel of your 
wed pages 


Netscape Nawgator 4.0 


Tables are This one orily took about 2 minutes to create’ 


tuck Files containing errors: 


Tables are Well, this might be taking things a bit too far 
funtt! 
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8 | Although Dreamweaver provides good support 
in its JavaScript and DHTML features for cross- 9 | Dreamweaver generates a report of how your 


@ Now we've actually got something that looks 


vaguely like a Web page, let's see just how browser compatibility, it’s always a good idea to Web page will work with the list of browsers 
WYSIWYG Dreamweaver is — select Preview in actually test your site in as many browsers as you selected in step 8 -— you can use this as a first 
Browser from the File menu. You may as well learn possible. Choose Check Target Browsers from the step debugging tool, but do try and physically check 
the keyboard shortcut for this - [F12] - as you'll be File menu, and highlight the browsers you want to your site in as many browsers as you can — especially 
using it frequently. The page looks as we'd expect. check against. if you've used any JavaScript or stylesheets. 
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Part 3: Using Image Maps 
Image Maps are an attractive way of designing hyperlinks for your Website, 
so put yourself on the Hotspot with Dreamweaver... 


Navigation aid 


With a bit of care, Image maps 


can make your site navigation i 
easy, without resorting to 
hackneyed effects like image 
rollovers. 
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Let's take a look at Dream 
Image map creation tools. 
Align button on the Properties 
the Insert Image icon on the n 
__ appropriate image — in this case sill 
the img directory. 


2, Meivetsen, sans-serie# 
al, Meivecion, sane-serie” 


ai. Melvetion, sane-seri” 


199, 196, 146, 199, 182, 197, 358,281, 


31 


Cas 


Carry on the whole way around the first 
button. To finish the first mapping and start 
jother, just click on the Polygon Hotspot Tool icon 

gain (or whichever one you want) and start on the 
next button. Create mappings for all the buttons on 
the image, with URLs. 


Press [F10] to display the sout 
new image map. If you like, yo 
areas of each of your buttons by hand to tighten up 
the accuracy of your map. Notice how Dreamweaver 
has attached your map to the correct image. 


‘ode for your 
an tweak the 


8 | You might be wondering why you'd overlay 
map areas in this way. The answer really is to 
provide dual functionality for your map — for 
example, you might want to add some JavaScript 
attached to the large map to trigger an event when 
any button is clicked. 


toe 
In you're inclined to do so, Dreamweaver also 
lets you easily overlay one image map on top of 
another. This time, select the Rectangle Hotspot 
Tool and create an image map that covers pretty 
much all of the menu image. Leave the URL in this 
case as ‘#'. 


2, 164,63, 141,90, 120, 91,99,94, 77.4 
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actually add a map area, click on the edg 
button. Next, click all the way around the 

, in short increments — you'll see a blue 
ching appear over the selected area. 


G Once you've defined a map area, you can 
move it about in its entirety by simply clicking 
and dragging. You can also use the standard cut and 
paste keys to copy an image map from one HTML 
page to another. 


Finally, press [F12] to preview your image in 
your chosen browser. If all is well, clicking each 
of the buttons on the image will load the correct 
URL, and clicking any one of them will trigger 
whatever Javascript you attach to the large map. 


web design special | 59 | 
arts 


Part 4: Layers vs Tables 


Dreamweaver contains excellent support for layers, for those occasions 
when tables simply aren't up to the job... 


Layer alert 
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Puta load of actualy ; celery ‘ei Pul a load of actually 
meaningful date in this layer, instead of the vacuous , meaningful data in this layer. 
instead of the vacuous A Sronsense that I'm instead of the vacuous 
nonsense that I'm us this particular nonsense that fm using in this 
this particular ex f particular example. 
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ntent into each of the layers you 5 | The z-index of a layer is basically a value 
created — if add a background ¢Olour to the 
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indicating the display priority of that layer — 6 | To make sure the z-indexes are set up correctly, 
layer that overlaps the first layer, you'll see that the layers with a high z-index appear on top of layers press [F12] to preview the page in your 
colour obscures the text or images that you add to with lower z-indexes. To see this working, click on browser — if you've set the z-indexes of the 
the first layer. In this example, we've ensured it the handle for the obscured layers, and change their _ previously obscured layers to a value higher than 
overlays two other layers. z-indexes to 10. 


the red layer, they'll now appear on top of it. 
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Put a load of actually 
meaningful data in this layer, 
instead of the vacuous 
nonsense that I'm ut 

this particular examy 


Put a load of actually 
‘meaningful data in this layer, 
instead of the vacuous 
nonsense that I'm using in 
this particular example. 
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eb You'll immediately find that you can't convert 


icone layers a work in 4.0+ series overlapping layers to tables — fair enough since Be aware that when converting layers to 
browsers, so if you're catering for users of 3.0 you can't overlap table cells. Drag the layers so they 9 | 


tables, Dreamweaver creates a spacing image 
series browsers, you'll have to go back to tables. aren't overlapping and try the conversion again. called transparent. gif in the same directory the Web 
Select 3.0 Browser Compatible from the Convert Dreamweaver creates the complicated table layout _ page is in — not a big problem unless you already 
option of the File menu and tick Layers to Tables. for you. 


have a file of this name in this location. 
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Part 5: Getting dynamic 


Now we'll take a look at Dreamweaver's useful DHTML functions, 
including Behaviours and the Timeline 


No experience 
—_————TTecessdi 


With Dreamweaver, there's no . 
need to learn JavaScript in order 
to be able to add DHTML effects 
to your pages. 
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This Window will contain 
now-you-see-it, now-you- 
don't content of some 

description 


Link One 


Link Two 


@ Now lets take a look at some of 
Dreamweaver's DHTML features, specifically 
Behaviours. Use the techniques we used earlier to 
produce a page roughly like this using layers. Next, 
bring up the Behaviours window by selecting 
Behaviours from the Window menu. 


3 Let's add another popup layer for the other 


© Jink. Use the HTML source window to speed 
things up. Highlight everything between the <DIV> 
and </DIV> tags. Copy it, and paste it. Note you 
must change the id= part of the new opening 
<DIV>. Add the appropriate behaviours to the other 
links, as in steps 2 and 3. 


Preview the page in a browser again. This time 

you've got three states for the Link One 
button. Moving the mouse pointer over and away 
from the link results in the large information layer to 
appear and disappear as before. If you actually click 
on the link, the image moves across the screen. 


Be Lot Yew leet Mosty Tee Gomurch Ste Wedow Heb 


Faces 


This Window will contain 
now-you-see-it, now-you- 

——J don't content of some 
description. 


Link Two. 
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py Highlight the text reading ‘Link One' and give 
it a link of ‘#'. Now you can add a behaviour to 
iece of text — click on the + button on the 

ours window and select Show/Hide layers. 

e name of the large layer, and click on 

e sure the action is OnMouseOver. 


eS 


tamed 


Link Two 


the Timeline. Add a new with 
the layer, and choose Add object to 
the Modify menu. Click at the end of the timeline 
and drag the layer containing the image to the other 
side of the screen. A path line will appear. Preview 
the animation by holding down the Play button. 


image. Select 
meline from 


8 | You can add as many Behaviours to a given page 


element as you like, from sounds that play when 
OnMouseover or OnClick to call JavaScript functions. 
You can use behaviours to pre-load images — select 
the entire page by clicking on <body> in the bottom 
left of the edit screen; add a Pre-load Images 
behaviour and select the files you want. 


Repeat step 2, except this time after adding a 

Show/Hide layers behaviour, select the same 
layer as before but click on Hide. Now change the 
defaulted OnClick action to read OnMouseOut. Set 
the default visibility of the large layer to hidden. Test 
this page in a browser and see what happens. 
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Now re-select the ‘Link One’ text again. Click 

on the ‘+' button in the Behaviours window to 
add another behaviour. This time select a Play 
Timeline behaviour, and choose the appropriate 
Timeline (in this case, there is only one). This time, 
stick with the OnClick behaviour type. 


9 | Animated objects don't just have to move in 
straight lines — moving them in smooth curves 
is simple. Click on a frame somewhere in the middle 
of the Timeline. Next, choose Timeline>Add 
Keyframe from the Modify menu. Drag the object 
somewhere else on the screen — you'll see the path 
becomes a curve. FEES) 
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There are 4 racing teams to sign up to in Ridge 
Racer Type 4: Assoluto Motor Corporation, Lizerd, 
Terrazi and Age Solo- Each team has a comprehensive 
line up of 32 cars, each one with ever-increasing 
performance and specifications. Progress up through 
the rankinns with the holn and ascietance af vaur 
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INsOMNIOUS 


"We're heading towards interesting times, if the Net is going to 
work as a channel it has to make-all the different technologies 
talk to each other...” Simon Serqides, co-founder of INsOMNIOUS. 


ight now the speed of change in the games 
and youth leisure industries seems to be 
quickening all the time. For the Internet to 
i keep up with the pace of development, you 
need an adventurous and experimental design 
company. One such studio is INSOMNIOUS, the name 
behind a plethora of youth culture Websites such as 
PlayStation, Columbia TriStar, Virgin Interactive, Tomy, 
ProPlus and Thomson Holidays, to name but a few. 

“All the clients that we work with are very youth 
culture orientated, with an emphasis on gaming, 
entertainment and the leisure industries,” says Simon 
Sergides, new business development director. “We 
decided these sectors would be the best as they're 
much more in tune to our talents.” 

INSOMNIOUS, as a new media design and 
consultancy, has been going for four years, but Simon 
and operations director Tricky (aka Richard Bassett) 
have been in the industry for considerably longer. “We 
started out in a back-bedroom environment, beavering 
away on the audio-visual interactive side of things. We 
were focusing at that time on floppy disks as delivery 
mechanisms and were very conscious of compression, 
therefore the natural progression for us was the Web,” 
explains Simon. 

Like many top Web design agencies, INSOMNIOUS 
has found it unnecessary to advertise its services 


thanks to the incredible effect of word of mouth 
recommendations within the industry. One visit to the 
Website and INSOMNIOUS ' portfolio of projects is an 
impressive display of the capabilities of the company’s 
design teams. 


Loaded weapon 


Audio, animation, interaction, language translation and 
a creative approach to navigation and content display 
are prominent features in their work. The side bar on 
the gaming site Empire Interactive, for example, self- 
assembles with the look and sound of a loading gun. In 
contrast, the Tomy children’s toys site contains a 
navigation bar that doubles up as a set of piano keys in 
a brilliant rollover device. And PlayStation Europe's 
Ridge Rider 4 site presents the game in five different 
languages, both in superb Shocked and non-Shocked 
versions, all of which, from HTML to the Flash movies, 
can be maintained via a straightforward database. 

“We are very flexible in our approach as every single 
project has a different set of problems,” says Simon. “If 
we were to be compared to someone who would reflect 
our attitude, ethos and execution, it would be the 
‘outlaw’ magicians Penn and Teller. In the industry, 
everyone seems to think there’s black magic 
surrounding Web design but there isn't. Everything is 


THIS ANIMATION = 


1 4.0 plug-ir 


\d CAN You SEE 


1,2 and 3. Generate, 
captivate, communicate and 
sustain — the motto of the 
INsOMNIOUS design team. 
Wide scale awareness, 
innovation, imagination, 
entertainment, ease of use 
and clear messages are at 
the root of the firm's 
projects. PlayStation Europe, 
Electronic Arts and 
Columbia TriStar are among 
the team’s many clients. 
Ridge Rider 4 for the 
PlayStation, EA’s Theme Park 
World and Big Guy Rusty the 
Boy Robot for film studio 

s. All rights r ec Columbia TriStar. 
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it simple and fun. 

5. The site for the game Oddworld immerses the visitor 
ina rich and fantastical world. 

6. Empire Interactive, a veritable feast of games 
presented in a loud and interactive site. 


glg 
A 


z 
i 
i 


i 
5 


g 
i 
ee 


cg 


Part Stope..| @Jeomeou.. | £ Jpterstaton onv-mi[fejromy-m. REG IORS ree 


i 
: 


INO “FAG Ls 


1. The INSOMNIOUS homepage. A slick and innovative interface 
with drag and drop style navigation, which receives up to one 
and a half million impressions each month. Budding designers 
from all over are offered the chance to create a stunning 
background for the site with a new one featured every month. 

2. With 20 in-house staff and a PC-dominated workforce, the 
capabilities of the design team are great. The INSOMNIOUS 3D 
pages provide an extended showcase of their talents and as 3D 
creativity comes more and more into play on the Web, this lot 
won't be left behind. 

3. “Digital media’s greatest asset is interactivity. Communication 
strategy comes first.” The team's belief in cross-media 
convergence is reflected in this inspired new project, 
Intravenous. A joint venture with two other creative media 
companies that looks towards the development of this concept. 
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just an execution, a good or a bad execution. We're 
happy to expose everything and try to give our clients 
what they want and not restrict them to any existing 
technologies and so on.” 

Now that Y2K fear has long been left behind, the 
growth of investments in the Internet and the expansion 
of Web technologies are unprecedented. Companies 
know what they want and are turning to Web design 
consultancies to get it. It's a time of experimentation as 
existing ways of using the medium of the Internet are 
constantly evolving. The emphasis is on reaching as 
many people as possible in the most dynamic and 
interactive ways imaginable. 


Hearts and minds 


“We listen to exactly what the client wants, then ask the 
questions they never knew they had to ask, then as a 
team we brainstorm and identify ways of achieving, and 
exceeding, their preconceptions,” says Simon. “We try 
to put our minds into the person we're targeting and 
continually test our ideas to ensure we're not missing 
the mark entirely. Our key strengths are within the 
creative arena, problem solving, project management, 
interface development and workflow architectures.” 

INSOMNIOUS endeavours to create new tools and 
programs to meet the client’s needs including 
multilingual and content management systems. Low 
maintenance Websites which make life as easy as 
possible and don't tie down the client are an incredibly 
attractive commodity, because the client can manage 
their content independently without the constant 
guidance of the design team. The sites aren't just short- 
lived flash-in-the-pan productions either, room is 
made for constant improvements and adjustments to 
keep the content and features as up-to-date and 
exciting as possible. 

“We truly believe in getting the right person for the 
right job, and don't do everything in house, so as not to 


dilute our key strengths or client deliverables. We co- 
ordinate with other best of breeds in the industry to get 
the best execution and delivery of solutions,” says 
Simon. “Our focus is on delivering simple, targeted 
digital communication environments, which can 
transparently integrate with complex backend systems 
and processes, to make user participation as simple 
and inviting as possible.” This reflects the excellent 
philosophy of INSOMNIOUS — cross-platform 
capabilities and problem-solving. 

So how willLit all progress, what will we be looking at 
in a year's time? “The future of the Web will involve 
much more continuity and integration across the 
board,” predicts Simon. “There has to be a shake-up 
that leads to mobility within the different technologies 
including WAP digital TV, on-line and off-line systems. 
We're looking towards this goal. We think the 
opportunities are infinite.” 


Techno frontiers 


Overcoming the limitations of today’s numerous and 
diverse technologies holds great implications for users 
and designers alike. Such mobility will put an end to 
irrational brand loyalties and change people’s mindset, 
says Simon. “It’s a fact that people are more likely to 
get divorced in this day and age than change their bank 
account. With what's going on on-line this is going to 
have to change and it will have to work cross-platform 
to keep people loyal.” 

With such vision and an awesome workload, surely 
the stress in the office must be quite intense? 
“Absolutely! But the crew, all credit to them, create a 
good fun atmosphere in the studio. We've got a shrine 
to our very own Elvis and toy UFOs buzzing around our 
heads which tends to surprise our visitors...” FEES 

a Discover more about INSOMNIOUS at [w] wwwinsomnious.com, which 


features links to their other sites. Contact [e] nosteep@insomnious.com 
[10208 3577373 


www. 3Dworldmag.com 


THE INTERNATIONAL MAGAZINE FOR 3D ARTISTS 


VESaD a 


..for 3D artists and animators everywhere 


e behind the scenes on groundbreaking new 3D projects 
e designing graphics for film, television and games 
e creativity tips and walkthroughs by experts 
¢ programs, demos and freebies on our CD 
e profiles of leading animators and artists 
e news from the 3D industry worldwide 
e new 3D software and hardware rated 
e creative and industry commentaries 
¢ Q&A: technique queries quashed 
e 3D and creative industry jobs 


e inspirational gallery section 


more info @ www.3Dworldmag.com « first issue £5 launched in the UK 20°06¢2000 
from the makers of Computer Arts 


3-issue trial for just £9.99! Save 33% 


UK - £9.99 ¢ Europe (Inc. Eire and North America) £12.99 ¢ Rest of World - £17.99 
Hotline number - 01458 271180 Order Code - HSEOO 
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With our Flash tutorial you can play any time... 


here’s no doubt that Flash has 
become the medium of 
; f preference for Web-based 
design, and not just because it 
offers fantastic graphics and animation, in 
return for comparatively minuscule 
filesizes. The tools and techniques of Flash 
are far more welcoming to the Photoshop- 
and vector-literate designer than HTML, 
while its powerful ActionScript facilities 
provide you with the means to create 
advanced interactive content that 
assembles on the fly, in response to how 
and where your viewer clicks their mouse. 
The stuff is so powerful, in fact, that you 
can create captivating games within 50K 
odd, which is more than reasonable for a 


phone line, and it’s a fact that a well- 
publicised game can drive your site stats 
up in exponential leaps. So we're going to 
make a game. 

The art of creating great Flash games is 
to keep things simple, at least initially, so 
you don't get lost in ever decreasing 
circles of complexity. Noughts and 
Crosses is the perfect place to start. All 
the core elements of game writing are in 
there — creating dynamically interactive 
graphics, tracking two sets of interactive 
events (one for each player), determining 
a winning move — while there isn’t much 
maths involved and the graphics and 
animation can be as simple or as you like. 
Sounds good? Let's get on with it... 


Part 1: Setting the stage 


You can't play a game without a gameboard, so our first step is to create the 
background, and set up our players... 


Copying frames 


You'll find copying actual frames 
very useful — select the frame, 
[Ctrl+Alt] or [Command+ 


taba | sou] deter] Teer 
—=  &=—h 
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© Comment 


Ince you've set up your movie size (600x400, — 


tline your sections — create two new 
anywhere in your timeline (select the 
it F6), as well as the existing one at 
ble click this one and label it ‘intro’ in 
the Frame Properties popup, then 


4 | Delete the transparent button at playe 
player’ on the first layer, then create (0) 
graphic at playerO, and X at player1, then convert 
them both into graphic symbols. On your actions 
layer, double-click the playerO frame and use the- 
dropdown in the Actions tab to add a Stop command, 
then add Stops at player1 and frame 1 too. 


0 and 


Then right-click the text for Properties and put 
‘player0' as the variable. Uncheck Draw Border 
And Background, check Disable Editing, Disable 
Selection and Include All Font Outlines, and restrict 
length to a number of characters that fit. Do the 
same for Player 1's name, putting player1 as the 
variable, and then again for each of their scores’ text 
areas, putting playerOscore and player1score as the 
variables. We'll set up these variables next. 


and background via Modify>Movie, you — 


frame after gameplay, and create a grid there 
our Line tool, using the Object Inspector to 
s the lines exactly. Then on another new 
d Pieces, draw a square - any colour — 
0 diene spaces and Convert it toa 
led ‘piece’ via the Insert _ 


5 | Double-click your stage to g 
main scene, then double-clicl 
movie, and in the Definition tab of 
the Instance Name ‘position1'. Dup 
times and place a copy in each of the grid spaces, 
changing their Instance Names to position2, 
position3 and so on as you go across then down. It's 
important to get these in the order you see here — 
you don't need the numbers. 


back to your 
Our piece 
popup give it 

e it eight 


PiayerO 


To show whose turn it is, we can flash the 

player's piece. Select the O by Player O's name, 
convert it to a movie symbol, and double-click it to 
give it Instance Name playerOpiece. Right-click to 
edit in place, put keyframes at frames 2, 7 and 12, 
and delete the graphics at 7 and 12. Double-click 
frame 1 to add a Stop, then double-click frame 7 
and add a Go To action, choosing Frame Number 2 
on the left and checking Go To And Play at the 
bottom. Do the same for Player 1's piece, giving it 
the Instance Name player‘ piece. 


Create a new layer, give it a keyframe on the — 


Right-click the symbol to Edit in 
‘select the square again and convert it 


Button symbol — in a bit we'll give it an on. 


action to put either a nought or z wee n 
when a player moves. But first, 


anev w layer called ‘actions' with keyframes in the i 
same place, labelled ‘player0’ and ‘player1’ — Player 
O corresponds to Os, and Player 1 is Xs. 


G Now we need the player info — create a layer 
called Players with a keyframe at gameplay. 
Then drag your O and X over from the Library to 
your movie at that keyframe, and lay out some text 
areas to show the players’ names and scores, and 
who's using which piece. We also need to make the 
text live, so it can update dynamically — double-click 
Player O's name area to edit it and depress the abl 
button in your toolbar. 


9 | Finally the intro screen. Double-click to get 
back to your main timeline, and put a Stop at 
the intro frame. Then on the Players layer, copy the 
contents from the gameplay frame to the intro 
frame, and relay it out with a splash graphic to ask 
for the players’ names. Right-click the name fields to 
uncheck Disable Editing, and finally design a Play 
button, convert it to a button symbol, then double 
click it and add a Play action (which defaults to on 
Release) in its Actions tab. 
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Part 2: Setting dynamic variables 


Now we lay the foundations for our gameplay, setting up variables and 
working out how to keep track of the score... 


Testing, testing 


Use Flash Preview for testing 
movies, and choose Control>List 
Varial 


to seea useful 
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First we control whose turn it is with a variable 

called the ‘theplayer' —- on your gameplay 
frame remove the Stop and add the action Set 
Variable: “theplayer" = thestarter, making sure the 
value is an expression, then put a keyframe at the 
next frame, label it ‘go’, and another at the frame 
after that with a Stop action. 


4 | For players to play moves, you need to add 
actions to your piece symbol. Find it in your 
Library (Window>Library), right-click it and choose 
Edit. Double-click your transparent button on frame 
1 and in the Actions tab choose Go To. Click the 
Expression radio button, and in the box type: 
“player” & /:theplayer. This creates the frame name 
playerO or player1, depending on who theplayer is. 
You put /: before theplayer to specify it’s a variable 
at the root of the movie-tree. 


nui sh- 
ak), not ignified 
quote t the 
in 
drop-d jon. 
sh 
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2 | In the Actions tab drop-down for your go 
frame, choose Tell Target — this offers a way of 
controlling the movie symbols. In the list on the left 
are all your Instance Names. Double-click 
playerOpiece, and add a Play action within the tell 
target. Now if you preview this, you should see the 
0 flashing. 


Also within the on Release add a Call action, 

putting hasmoved as the frame — this 
implements frame actions from a frame without 
actually playing it. Then at frame 15 of your piece 
symbol, create a keyframe on the actions layer and 
call it hasmoved. In the next stage, we're going add 
actions for the main gameplay rules. First, though, 
we need a way to track the positions of the players 
pieces and a way to compare them to possible 
winning positions. 


<5 =e 


3 Set the variable “player1 =0, too, and 
then “thestarter"=0 in the way, which 
specifies who goes first. Now if y atemporary 
Stop at your gameplay frame and your 
movie via File>Preview>Flash, you s see the 
values in your dynamic text fields re’ r 


variables with the same name. 
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Instead, we want the flashing piece to depend 

on whose go it is, so go back to this action and 
in the Target field type the expression: “/player” & 
theplayer & “piece”, and choose Expression from its 
drop-down. This puts either a 0 or 1 in the target 
name, depending on the value of theplayer variable 
—ie, whose turn it is. If you set “starter”=1 in your 
intro frame, you should now see X flashing when 
you preview your movie. 


G We do this with several strings of nine 
characters — one for each position on the game 
board. Click Scene 1 at the top left to get back to 
your main timeline, and at your gameplay frame set 
the variable “playerOpattern” = “O000000000" and 
“player1 pattern" = “000000000” (that's nine 
zeroes each). You should also set “numberofmoves” 
= 0 so we can track how many moves have been 
played. Then in your intro frame, you need to set 
eight variables for each of the eight possible 
winning patterns: 

“win1" = "111000000" 


“win2" = "000111000" 
“win3" = "000000111" 
“wind” = "100100100" 
“win5" = "010010010" 
“win6” = "001001001" 
“win7" = "100010001" 


“win8" = "001010100" 
You can copy these from win.fla on the coverdisc if 
you want. 


Part 4: Enforce the rules! 


What happens when you play a move? Is someone a winner, or can their 
rival play another move? Time to find out... 
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Now to update the player's pattern variable. 
2 | We get the position of the move, by getting its 


@ Once a player's moved, we've e got four things 
to do: stop the flashing symbol, update the 

variable tracking the pattern of the player's pieces, 
check if it's a winning position, and if not, move to 


number from the symbol's Instance Name. See why 


it was important to get them in the right order? Set 
a new variable called ‘thisposition’, set its value to 
be an Expression, and open the Expression Editor 


r3 | The next line gets the player's ex 
Set a variable called ‘thepattern’ 


the next turn. Copy and paste the’ Tell Target action 
from your go frame to the ra frame in your 
piece symbol, but put /: in front of the theplayer 
variable to target the variable in the root movie. You 
should have: Begin Tell Target (“/player” & 
/:theplayer & “piece")... Also change the Play 


om the drop-down. Double-click Substring from value choose Eval in the Expression Ed ae 
e list on the right, and you get: Substring (string, ‘variable’, type: “/:player” & /:theplaye 
, count ). Select ‘string’ and double click “pattern”. You should finish with Set Verable: 


e to replace it, which gets this movie's Instance “thepattern" = Eval ( “/:player” & /:theplayer & 
Then replace ‘index’ with 9 and ‘count' with —“pattern"”). This puts together the variable 
it OK. You should end up with: Set Variable: _/:playerOpattern or /:player1pattern, then finds out 


action to a Go To frame 1 action. 


Bere ‘Actors | Twomns | 


The next line swaps the Faeegiiste Oin the 
pattern for a 1. Set the variable ‘thepattern’ 


» again, putting as its value the Expression: Substring 


( thepattern, 1, thisposition-1 ) & “1" & Substring 

thepattern, thisposition+1, 9-thisposition ). Finally, 
Ne output the newpattern again by setting another 
‘ariable, with the variable itself set to Expression, as 


You can copy all this from update.fla on the 
coverdisc, if you want. 


That's aly ah. 4 so you can copy the whole 
win-checker from wincheck.fla on the CD. Next 
we want to track how many moves have been 
made, just in case it's a draw: there's no winner, but 
all the spaces are filled. Set the variable 
“/:numberofmoves” = /:numberofmoves+1 to do 
this. Now we can tell the game what to do next. 


ion” = Substring (_name,9, 1 ). 


ew pattern is a winning 
mpare to each of the 
possible winning patterns 
loop running from 1 to 8, because there 
winning patterns, checking for winners. Set a 
variable “haswon” = 0, to track if there i is a winner, 
and another “i" = 1 - both thei 
expressions, since they're not sur Sunded by quote 
marks, Then choose the Loop a 
condition put i<=8 AND haswon=0 
in the loop, so you get: % 
Loop While (i<=8 AND haswon=0) 
Set Variable: “i” =i+1 
End Loop 


an 


i" =i+1 


Add an If clause asking if “haswon" = 1, and 


this time click the Add Else/Else If button twice. 


For the If Condition put haswon=1, and then add a 
Call action calling a frame called ‘haswon' - we'll 
create this in the next stage. Then select the first 
Else, choose Else If on the right, put 
/:numberofmoves=9 as the condition, and insert a 
Call (“draw") action after it. 


what it is. 


G Within the loop, and before “i” =i+1, we need 
to run another loop to see if at least three 
pieces in the player pattern match those in one of 
the winning patterns. So before "i" = i+1 we put: 
Set Variable: “j" = 1 
Set Variable: “hasmatch” = 1 
Set Variable: “thewin" = Eval ( “/:win" &i) 
Loop While (j<=9 AND hasmatch=1) 
If (Substring ( thewin, j, 1) = "1" AND 
Substring ( thepattern, j, 1) = “O") 
Set Variable: “hasmatch" = 0 
End If 
Set Variable: “j" =j+1 
End Loop 
If (hasmatch=1) 
Set Variable: “haswon" = 1 
End If 


9 | The final Else governs what happens if it's 
neither a winning nor a draw move - it's the 
other player's turn. First you want to change the 
player: set the variable “/:theplayer" = (/:theplayer- 
1)*-1 with the value as an expression - so if it’s 0, it 
becomes 1, and vice versa. Then you need to start a 
new turn by telling the main movie to go and play 
from the frame labelled “go” — the target name of 
the root movie is “/". So you should get: 
Set Variable: “/:theplayer” = (/:theplayer-1)*-1 
Begin Tell Target (“/") 

Go to and Play (“go”) 
End Tell Target 


web design special | 69 | 
arts 


Part 5: The game's up! 


Win, lose or draw, we need to work out how the game finishes — and devise 


a colourful victory routine. Have fun! 
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p to get which 

s, and turn them 

t a loop while 
pieces and turn 


red. So set “i"=1 again, and the 
i<=9. In the loop we get the winr 
them red: i 
If (substring ( thewin, i1)="1") 4 
Begin Tell Target (“/position” 
Go to Next Frame 


Mf Lb 


The rest is easy now. After the End Loop adda 
Tell Target » & telling the root movie, “/", 
to Go To And Play at frame label “win", which you 
created earlier. Head back to this frame in your main 


timeline, to create a winning graphic and animation. 
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You should also add an action here to update 
the scores — note that the variable name is an 

expression, as well as the value: 

Set Variable: “player” & theplayer & “score” = Eval 

( “player” & theplayer & “score” ) +1 
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To put the name o 


6 | e winner, just set up a 
variable at the win frame, “playername” = Eval 
(“player" & theplayer), then create a live text field 
as before in your winning graphic, and set it's 
variable as playername. 


5 | ry ifyou're, you're going to keep the pieces in view, 
protect them with a transparent button on the 
layer above so no more moves can be played. 


8 | Create a Play Again button and a New Match 
button for the win scene, on a new layer, and 
put a Stop action at the frame where they appear. 
On Release, give the Play Again button a “starter” 
= (starter-1)*-1 action to change the player who 
goes first, and a Go To and Play (“gameplay”). Set 
the New Match button to go to intro. 


Finally, create a keyframe labelled ‘draw’ in 

your main timeline, and create a draw scene, 
with similar buttons. Then you're done — export 
your game and check it out! FEES 


[myopic] FISH EYE 


Short-sightedness is now a thing of the past, our new catalogue and CD will give you 360 degrees of inspiration. Order by phone, fax, email or @ www.pictor.com 
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Graphical art is often static, but with JavaScript 
and a Web browser, not only will it move, it 


becomes intelligent. Discover how easy it can be 


et’s face facts, computer 
programming isn't widely 
regarded as an interesting 

i branch of computer design. 
However, thanks to the Web, and the 
browsers that go with it, programming and 
design can merge together to form 
something new and exciting. 

For the past few years, every Web 
browser has had a programming, or 
scripting, language called JavaScript built 
in. It enables you to make your graphics 
and designs interactive, reacting to what 
the viewer does. They can even be 


intelligent, making pre-defined decisions 
from a variety of factors. 

If all this programming sounds 
complicated, then you may be pleasantly 
surprised. Not only is JavaScript 
relatively easy to learn, but you can simply 
copy and paste other people’s work (with 
their permission, of course!), making 
small adaptations. Over the next four 
pages we'll show you a series of graphical 
scripts which you can use on your site. 
And if you don't fancy all that typing, you'll 
find these scripts on the cover CD for you 
to copy and paste. 
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Part 1: Roll me over 


The rollover is a classic design feature of Web pages. When the mouse passes over a hyperlink, without 
clicking, a graphic can change from one state to another 


Rollover return 


desired, when the mouse 


‘leaves, the graphic can return to 

if its previous state. This works best 
when the two graphics to be 
_swapped are of the same size. BS 


Name yourfiles 
The important thing to remember onMouseOver = “ 


document.images['option1'].src = ‘overgif’; 


1 | The onMouserOver event only works with hyperlinks. In this 
case, when the mouse passes over the hyperlink text, we change 
the small graphic just to the left of the link to indicate which option is 
currently being selected. 

The same onMouseOver event also changes a second graphic at the 
return true; “ top of the screen to show the logo of the magazine in question. 

me ; TOC ee Se Obviously you'll want to substitute the name of your own GIF files 

onMouseOut = “document.images['option!'].src = ‘out.gif’; here. When the mouse leaves the hyperlink, the onMouseOut event is 
initiated. This changes the graphic to the left of the hyperlink back to 
its original file, but leaves the banner as is. 


document.images[‘banner’].src = ‘computerarts.gif’; 
window.status = 'Goto the Computer Arts Web Site’; 


You are here 


You can use rollovers on your site 
purely for a design effect, but 

[w] www.nitpickers.com uses 
them to actually help the user 
Navigate: fie yeerpese the mouse window.status = Goto the MacFormat Web Sit 
over the buttons at the left side of 
the screen, the large text label is 


return airues® a Another piece of JavaScript which uses the onMouseOver event 


is the window.status property. This enables you to specify the 


replaced by smaller text, text which appears in the status bar along the bottom of the browser 
describing exactly what the window when the mouse is over a hyperlink. 
button does. 


By default, the status shown is the HREF of the link, but since this is 
often unintelligible to the viewer, it can be useful to override it, and 
put your own custom message there. 

If you do use the window.status property, you must follow it with 
the return true statement. If you forget, it won't work, and worse still, 
JavaScript won't even remind you by producing an error message. 


STYLE=“color: #000000; text-decoration: none“> 
<IMG NAME = “option3* BORDER="0* SRC = “out.gif*> 
-net Magazine 
</A><BR><BR> 


3 | It’s a matter of preference, but some might find the default blue 
underlined hyperlink text rather gaudy. You can override this by 
using the STYLE attribute in the <A> tag. This actually isn't JavaScript 
at all, but rather a little bit of Dynamic HTML. 

Whereas JavaScript works in virtually all browsers, DHTML only 
works in the latest versions. Another problem with DHTML is the 
same command can work differently in different browsers, whereas 
the vast majority of JavaScript is universal. Fortunately, this bit of 
DHTML is quite safe. 

Also, notice that the graphic has also been included inside the <A> 
tags, so that the graphic becomes part of the hyperlink as well as the 
text which follows. 
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Part 2: The write move 


The problem with designing text for the printed page is that it's, well, rather static. We've seen that 
JavaScript offers the designer the ability to change graphics on the fly, but it also enables text to move... 


Scroll on 
, a ae = Moving text adds interest toa 


page, and can draw the viewer's 
: 
attention to something important. 


1] We start this script by creating a couple of variables. This is similar 
to the algebra you learnt at school when x can change depending 
on the formula. The first variable is a counter which will later help us 
to move the message banner across the screen. 

The secret to the continuously scrolling banner is to have one long 
piece of text (string) repeating the same message many times. To save 
us having to create the long string, we define it once then use a loop 
to repeat it. Here we create a loop which goes around ten times, 
adding the message to itself each time. It also adds a gaps of several 
spaces between each occurrence of the message. 


var scrollstart = 0; 


var scrolltext = “Computer Arts is a great magazine"; 
for(count=0; count<10; count=count+1) {scrolltext = scrolltext +“ “+ 


scrolltext;} 


function myscroll() { 


This is the heart of the banner script. It starts by displaying a 

section, or substring, of the entire banner message. The section it 
shows starts at a position defined by the starting variable we created 
earlier. It then includes the next 100 characters, although you may 
want to increase this for a large banner. It then increases the starting 
position by one character, for the next loop around the script. 

Then it checks to see if the banner has now scrolled the distance of 
one whole message. If it has, the starting variable is reset to zero, so 
the text goes back to the start. Finally it loops around the script using 
the setTimeout method. The number, 100 in this case, defines the 
speed of the scroll. 


document.myform.mytext.value = scrolltext.substring (scrollstart, 
scrollstart + 100); 


scrollstart++; 
if (scrollstart == scrolltext.length) {scrollstart = 0;} 


a 


setTimeout(“myscroll();*, 100); 
} 


var typestart = 0; 


Se Fg Sa a IS 


Now we come to the ticker tape script. It starts and ends in 
similar fashion to the scrolling banner script, but the central 
section here is different. 
The text stays still but continuously adds the next character to the 
end. However, if the next character is a space, then the scripts 
immediately moves ahead to the character following the space, 


var typetext = “Computer Arts is a great magazine"; 


function mytype({ 


ee 


typestart++; otherwise it would appear to stutter. 

¢ ; é, When the entire message has unravelled into the text box, the 

if (typetext.substring(typestart-1, typestart) ==“ “){ starting variable is reset to zero, so the entire message disappears and 
je i Sa _ typestart++; starts again. 


Sos Seas as 


} 


document.myform.myarea.value = typetext.substring(0, typestart); 


if (typestart == typetext.length) {typestart = 0;} 


setTimeout(“mytype();*, 100); 


} 
</SCRIPT> 


<FORM NAME=“myform*><BR><BR> 
<INPUT TYPE=“text* NAME="mytext* SIZE="60* 
VALUE=““><BR><BR><BR> 


You cannot dynamically change static HTML text on the page, so 
to achieve moving text, we have to use text fields in a standard 
form. Here we use two different types of text field. For the scrolling 
<TEXTAREA NAME=" “ ROWS="4" COLS="20" banner we use the TEXT type, which is a single line. For the ticker tape 
: ee script we use a TEXTAREA field which can be many lines deep. 
WRAP="YES"></TEXTAREA> The important to remember is to name the fields. This enables our 
</FORM> JavaScript to reference which field their respective text is to appear in. 
If you do use a TEXTAREA field, it's also important to turn the text 
wrapping on. 
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Part 3: Chaos theory 


Designers can spends an age judging structure and balance to a page, which is all very worthy, but where's 
the fun? How about adding a bit of danger to your pages by adding an unknown factor — randomness 


Lucky numbers 


JavaScript has the ability to 
generate random numbers. With 
a bit of skill and imagination, 


these numbers can be turned 
into random colours and 
ea sett yes 5 function myRandom(maxnum, format){ 
portant technique use i 4 5 
1 chwndeciemeil var mynumber = Math.random(); JavaScript offers a built in random function. However, in common 


with most programming languages, it's rather basic. This is 
because it can only generate a random number between zero and 
one, to an accuracy of 16 decimal places. 

Our custom function uses a little bit of maths to make it more 
useful. If you pass a number to it (a parameter), it will generate a 
number between zero and the number you passed in. 

There's a second, optional, parameter which states the format you 
return mynumber; want. In particular, the randomly generated number can be converted 
to hexadecimal. We'll use this below. 


method. This writes HTML to the 
screen just as is it were normal 
HTML. The difference is that it is 
controlled by JavaScript, and 
therefore can be programmed to 
have random results. 


maxnum = maxnum + 1; 

mynumber = mynumber *“ maxnum; 

mynumber = Math.floor(mynumber); 

if (format == “hex*){(mynumber = mynumber.toString(16);} 


var mybgcolor = ““; 


2 The document.write method can write HTML to the page. In this 

case, we want to create a <BODY> tag with a randomly 
generated background colour, specified with the BGCOLOR attribute. 
This is made up of six hexadecimal numbers, that is, zero to F. 

The easy way to create this string is to use a loop. In this case we 
loop around six times, adding another hexadecimal number to the end 
of the string with each loop. Having created our random colour, we 
generate the entire <BODY> tag and write it to screen. 


for(count=0; count<6; count++){ 
mybgcolor = mybgcolor + myRandom(16, “hex"); 
} 


document.write(<BODY BGCOLOR=“#' + mybgcolor + “>’); 


var adnum; 
var frequency; 


We want a random graphic to appear at the top of the screen, in 
this case an advert. The <IMG> tag appears later on the page, 
has been given a name, and has a default image to start with. 

We have three ads to choose from, so we generate a random number 
from zero to two, inclusive. Having got our random number we change 
the source of the image using a similar technique to the rollover in the 
first script. The trick is that the advert images all have the same name 
except for a numeric suffix. This means we can reference the name of 
our ads by appending our random number. 


‘| 


function randomAd({ 
adnum = myRandom(2), 

alert(adnum); 
document.images[‘advert’].src = “advert* + adnum + “.gif*; 


frequency = myRandom(5); 
frequency = (frequency * 100) + 200; 
setTimeout(“randomAd():", frequency); 
} 


4 | For a final element of randomness, the speed with which the 
advert changes has been given a deal of latitude. First we 
generate a random number from zero to five. The delay is measured in 
milliseconds, so we multiple it by 500. 

We also want the ad to stay visible for a minimum of a second (if the 
random number was zero, multiplying it by any number won't help) 
so we add another 1000. Finally we use the setTimeout method to call 
our advert function, which will pick another random graphic. Of 
course, it may be the same advert again, but that's no problem. 
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Part 4: Scrolls both ways 


We've seen changing graphics and moving text, but for our last script we'll create moving graphics. 
JavaScript can control most elements of the browser window, and the scroll bar is amongst them 


You've been framed 
<= The ability to scroll the page isn't 


pften very useful. However, we're 


‘going the split the page into two 


function getPlatform0{ 
if (navigator.appVersion.indexOf(“Windows*) > -1) {return “Windows*;} 

if (navigator.app Version.indexOf(“Macintosh*) > -1) {return “Macintosh*;} 
if (navigator.app Version.indexOf(“X11*) > -1) {return “Unix*;} 

if (navigator.app Version.indexOf(“Unix*) > -1) {return “Unix";} 

return “Unknown*;} 


JavaScript provides you with two properties which tell you most 
of the important details about the machine being used to view 
your page. The navigator.appName property returns the name of the 
browser, usually Navigator or Explorer. The navigator.appVersion 
property returns the exact version of that browser, including the 
version number and the platform. 

The format of the returned version can be a little vague, so it's a 
good idea to guild your own function, such as this, to give a clearer 
answer as to which platform is being used. 


if (getPlatform() == “Macintosh*) { 
document.write(<FRAMESET ROWS="64,"> <FRAME 
SRC="script4.htm* SCROLLING="NO“> <FRAME 
SRC="http://wwwuturenet.co.uk*> </FRAMESET>’), 
} 
else{ 
document.write’ <FRAMESET ROWS="80,"“> <FRAME 
SRC="script4.htm*> <FRAME SRC=“http://www.futurenet.co.uk*> 
</FRAMESET>’), 
} 


Depending on the platform being used, we want a slightly 
different frameset arrangement. First, we use our function to 

determine the viewer's computer. Then we use an if statement and the 

document.write method to write all of the frameset HTML. 

We should issue an warning here. Although HTML is generally 
universal, it will render differently on different browsers, and on 
different computers. This produces a lot of combinations, and if you 
start to write different HTML for each one, you can quickly spend 
more time fine tuning pages than creating real content. 


oT ee ie | 
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<BODY BACKGROUND=“background.gif* onload="“myScroll();"> 
<TABLE WIDTH="2000*> 

<TD>&nbsp</TD> 

</TABLE> 


The easiest way to produce a banner is to use a graphic as the 

body background. This way it is tiled automatically. On some 
platforms, in order for the banner frame to scroll, the contents of the 
frame has to be wider than window. 

Of course, we don’t actually want any content in this frame. The 
solution is the create a very wide table with a single cell. You'll need to 
add the ‘&nbsp’ between the <TD> tags to make the table render 
properly, without actually having any visible content. 


var y = 0; 


one. 4 | Now we come to the script which scrolls the banner frame to the 

left in one continuous loop. Using the window.scroll method, it 
scrolls the banner one more pixel to the left each time around. The 
speed of the loop is controlled by the setTimeout command, and you'll 
want quite a short time delay. : 

Once the banner has scrolled the entire width of the original graphic 
to the left, it resets itself and starts back at the beginning. You'll need 
to enter the exact pixel width of your graphic to make the transition 
setTimeout(‘myScroll();, 20); smooth, and make it appear as an infinitely wide banner. 


function myScroll() { 


if (y <= graphicsize) {y = y + 1;} 
else {y = 0} 
windowscroll(y.0); 
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Reed New Media have a wide range of 

career opportunities for you to choose from. 

Quite simply, it's a licence for you to make a killing. 
So stir yourself into action and log on today. 


“The name's 
New Media... 
Reed New 
Media” 


Web Designers 


Countrywide fall rates 


Whether you’ve designed two wonderful web sites 
or twenty, we can help you track down your next 
mission. If you’re expert with Flash or Director, 
Dreamweaver or HTML, PhotoShop or FreeHand, 


Fireworks or Illustrator - and your ability to create 
stunning sites scares the living daylights out of the For more information email your CV to 
competition — call Reed New Media now and get Jeremy Saunders or telephone 0117 914 7340. 
a thunderball under your career! Ref: CA/33968/JRS N EW M E 'D) IA 


Email: jeremy.saunders@reed.co.uk Reed New Media, 33 Wine Street, Bristol BS1 2BQ. 


recruitment by innovation Offices throughout the UK. AHEAD OF OUR TIME 


PROFESSIONALS 


Asp Developer ref HQ120 
Lively Design company seek middle-weight database developer, 
must have 2 ASP experienc ; nd SQL 6.5. 
Code busters only, no wimps or suits 


Permanent - London Salary £ 25 - £ 30k 


Web Developer ref HQ121 
vublishers require experie 
m skills in industry standard dev 
Photoshop, O eamweav 
have a sound und i 
then we want to hear from you. 
recruitment 
Permanent - London Salary £ 25 - £ 30k 
3 Y Web Designer ref HQ 122 
We offer an established new media Highly creative web designer required by leading media 
and design recruitment service that company based in West London. You need to possess solid on 
is unsurpassed. line experience and be able t k to challenging 
communication briefs. Flash, Fireworks, Dreamweaver and 
So whether you are looking for the Photoshop essential. 
right candidate or the right company, 


A ‘ Permanent - London Salary £ 25k 
there really is only one choice. —_——— 


Multimedia/Internet Trainer ref HQ 123 
Call us on 020 7222 8484 or visit our Leading Media trai mpany require excellent 

- communicator to deliver training in Director 7/8, Flash 4, and 
web site www.corps.co.uk Dreamweaver. Knowledge of Lingo, Fireworks, HTML and 
Photoshop essential. Exciting opportunity within fast moving 
established company awaits right applicant. 


Permanent - London Salary - Dépendant on 
Experience 


tel.020 8960 9400 fax.020 8964 0447 


harlequin 


1. The Matinee home site, Revolution 
2000, makes typically extensive use of 
Flash, creating a dazzling experience 


Matinee’s talents to maximum effect. 


a 
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Matinee 


Seri er 
Sales & Marketing 


£25-40k pa + bonus (60k OTE} 


person. 


£20-40k pa + bonus (60k OTE) 


previous experience will be useful. 


for the visitor and showcasing 
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Rocking sound, smooth visuals and big ideas collide in a cutting 
edge way at Matinee, says designer Ben Adams. “We create 
Web experiences as opposed to Websites...” 


hen you walk down the street and pass a 
big, old house, you have no idea what's 
going on behind its closed doors — a spot 
of serial killing, a touch of pirate radio 
broadcasting, or even some ground-breaking Web 
design. Matinee, from its unlikely location of five 
houses in Reading, has built a small multimedia 
empire. A kind of home from home for the business of 
Web design, among other things. 

‘Among other things’ is an important phrase when 
you talk about Matinee. Remember multimedia? 
Before the Web it was the word that created a lot of 
buzz — a loose catch-all phrase to describe how sound 
and vision would converge in computers. Around that 
time, when everyone was after a slice of the multimedia 
action — usually tourist boards who wanted to produce 
a cutting-edge CD-ROM or visitors’ kiosk — Matinee 
was a true multimedia company. 

The company was originally created in 1982 by 
current MD Chris Broderick — a musician who decided 
to build his own recording studio in the basement of his 
house in Reading. The move into Web design in 1997 
was a natural one for Matinee — already skilled in 
providing audio services to corporate clients with its 
in-house recording studios, and experts in video 
production and editing, thanks to a couple of AVID 
editing suites. It was Macromedia’s Flash technology 
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that brought this audio-visual specialist company into 
the on-line fold. 

“We waited until Flash came along which could 
deliver true multimedia in an on-line environment,” 
explains Matinee’s marketing co-ordinator, Asomi 
Ithia. And the move into Website design is remembered 
by the version of Flash that was around at that time — 
Flash 2. Matinee has created cutting edge Websites for 
the likes of the Jordan Grand Prix team, Electronic 
Arts, Chrysalis, De Morgan, and even Belgium's 
Ministry of Science. 


No competition 


What makes Matinee unique is that it has many 
compelling selling points. “As a business, people ask 
us who our competitors are. We can safely say there is 
no direct competition to us as a business,” says Asomi. 
Certainly you won't wander around many design houses 
that have Keep Quiet notices hanging from doorknobs 
and red recording lights illuminating the corridors. 
“Lots of people do Web design but we as a company 
offer complete solutions for all aspects of media 
requirements,” Asomi continues. “We're strong in all 
areas. We're not trying to develop multi-skilled people. 
We get experts for all areas of our business.” This 
means Matinee is more than the sum of a few coders 


To help us launch a totally revised product and di 
Applicants must have product marketing experience ar 
sales. You will need to recruit and run your own team and | 
achieve the targets set. Excellent salary and incentives 


Young cool dude... Account Manager for Website and E-commerce 


Product Manager for our presentation software - M 


Our design attracts considerable interest from the publishing, music, filn 
other fashion orientated industries. We need a ‘not to corporate’ ac 
to help develop these accounts. Style is what we are looking for, and some. 
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and illustrators. The audio experts who create the 
sound for games companies such as Acclaim and 
produce soundtracks for corporate training videos and 
CD-ROMs, also forge tracks for Matinee’s Flash 
animation work. 

Still, the heart of Matinee’s Web team contains at 
least two good illustrators, three who specialise in 3D 
work, a handful of HTML coders, and a talented bunch 
of hardcore programmers who, jokes project designer 
Ben Adams, “we keep upstairs in the loft”. Ben heads 
up one of Matinee’s studios and tries to ensure that the 
“madly freakish” designers at Matinee are kept in touch 
with the realities of Web design. He points out that the 
lines between each job are not etched in concrete: “We 
love what we do and so we all do everything”. 

These realities are primarily about meeting 
customer requirements. Flash is Matinee’s key area of 
expertise but Ben points out that “it’s not the best for 
every job”. The wow factor is certainly important to 
Matinee. “We talk about the wow factor and creating 
infotainment on-line. We combine information with 
entertainment,” says Ithia. But, Ben points out, “we 
don't sell sites that look wow-y just for the sake of 
looking wow-y”. 

However, Matinee hasn't yet developed a site that 
doesn't use Flash, although it has developed pure 
HTML sites that exist as daughter sites to the main 
Flash site. It did this with the Website for games 
company Bullfrog, at w www.bullfrog.com. Bullfrog 
provides a good example of Matinee’s philosophy in 
action. “We use animations to deliver information in 
interesting ways. We want to get people talking about a 
site, generate interest in it, and make visitors return for 
a second or third visit,” says Ben, underscoring the 
notion of the wow factor. 

Exploiting the interactive nature of the Web is 
important to Matinee. “We create Web experiences as 
opposed to Websites,” opines Ben. Hence the 
extensive use of Flash that can easily combine 
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2. The Chrysalis Entertainment Website 
brings to life the company’s butterfly logo. 
3. UKCCL uses Flash to entice gameplayers 
to do battle over the Web, with a unique 
‘fragometer’. 

4. Matinee has breathed life into the 
corporate site with its work for recruitment 
specialists Bluebridge. 

5. The site for Theme Park World captures the 
colour and fun of the Bullfrog game. 

6. Big Life is a colourful site for a music 
management company. 


4 8 aaron 
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1, Matinee created a businesslike yet 


communications company DeMorgan. 


engaging on-line presence for 


Telephony Management 


jraphicai browser allows 


your data at the click of amouse 


Streamline your Flash movie and 
stop visitors hanging around... 


Testing initial movie playback 

Check to see whether your on-line animation creation 
will stream over an Internet connection. Press 

[Ctrl Cmd]+[Enter] in Flash and switch the bandwidth 
profiler on. Scan across the bandwidth graph in the 


search of ‘peaks’ (anything above 200 bytes). 


Find any offending symbols 

If you find any large peaks, work out which symbols are 
causing the peak either by observing which symbols 
are entering the frame at the points which the peak 
occurs, or by exporting the movie with the Produce 


Size Report option selected and studying the text file. 


Produce a preloader 

To produce an optimised Flash movie, you need to 
iron out those peaks, which is done by producing a 
preloader at the start of the movie loading any 
‘offending’ symbols into memory beforehand. A Flash 
movie only ever loads each symbol into memory once, 
no matter how many times it is used within the movie, 
therefore by loading it in the first few frames while 
amusing the user with a catchy ‘loading’ animation, it 
leaves the rest of the movie to stream cleanly, 
stopping any glitches and pauses within a movie. 


* See opposite to learn how to create a preloader. 
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powerful animation with knockout sound to create a 
fully involving Web experience that doesn't take an 
eternity to download. 

“It's something that isn’t boring,” sums up Ben, when 
asked what makes a Web experience. “A Web 
experience is something that people will want to see 
just because they want to see it. They'll tell people to go 
and look at this site, even if they have no interest in the 
site and what it's about,” he elaborates. 

But, like any good Web designer, he qualifies that 
with caution. “At the end of the day, you can't have 
something that will blow people's socks off and then 
they don't know where to click. Getting the information 
across is the most important thing.” 

And three clicks is still the magic number in 
Matinee’s book. “We abide by the three-click rule. If 
visitors can't get where they want in three clicks, we’ve 
failed,” explains Ben. Matinee's current Website, 
delicately titled Revolution 2000, shows how sites can 
be made simple to navigate. This is the third version of 
their site and it has already nabbed them the silver 
award from the International Visual Communications 
Association (IVCA) in March. Last year, the company 
won the gold award and both sites have, unsurprisingly, 
featured as Macromedia’s Shocked Site of the Day. 


To boldly go 


“It was a bold step to go down the Flash route and have 
a whole site totally Flash,” says Ben, but the gamble 
paid of with the IVCA highlighting Matinee’s “cutting 
edge use of Flash”. In addition to Macromedia's wonder 
vector tool, Matinee uses the usual Web design tools — 
Dreamweaver (“but we tweak the raw code ina simple 
text editor”), Photoshop, FreeHand and Illustrator. |n 
addition they use 3D Studio MAX for 3D work and 
Director to produce the odd Shockwave movie. 

It’s the PC versions of the software that Matinee 
uses because its Web design operation is entirely PC- 
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based. “Why develop on a Mac if it’s going to be viewed 
ona PC?” says Ben. And the login stats for Matinee’s 
sites prove the minority status of Mac ownership. Ben 
even jokes that “hopefully Microsoft and Intel will take 
over the world and we'll get some standards”. Brave, 
controversial and a little bit serious too. 

The team keep a Mac in the corner “for testing 
purposes’, but it’s the lack of standards between 
platforms and browsers that gives Ben the most 
headaches. “It’s not a problem, it’s a challenge,” he says 
diplomatically, after expressing a wish for Netscape 
Navigator to, shall we say, quietly expire. Asomi says 
that the most difficult part of his marketing job is the 
Web side of things because “it’s the area that’s moving 
fastest and you always have to keep on top of things”. 

Matinee has its eyes peeled for new ideas and new 
ways of doing things that can make their clients’ 
Websites even more exciting. After all, it has a cutting 
edge reputation to protect. “| spend half my time 
researching new technologies,” calculates Ben. 
“Everything is evolving so fast and there’s so many new 
players. We'll always keep our eyes open.” 

At the moment, they're experimenting with 
Macromedia’s Generator and the added functionality 
that Flash 4 brings, that can handle additional 
programming and updates on the fly. 

Matinee also has a new site in development for 
Belgium’s Ministry of Science that promises to be 
rather funky. “It’s a clever concept,” enthuses Asomi. 
Using Flash, the visitor can navigate different levels of 
an imaginary building and use their mouse to, say, 
interact with the receptionist or cause a jug of coffee to 
steam up. It sounds intriguing, like playing Zelda on the 
N64. But on the Web. With just your browser. “We 
perceive we're ahead of the game,” concludes Asomi. 
Way to go, Matinee. Games are fun. EEE 


_ Make your own preloader 


With a preloader, visitors to your site can be entertained while your Flash 
movie downloads. Matinee shows you how in six easy steps... 


Firstly you want to make a simple (therefore small in 


3) file size) looping animation to amuse the user while 
the preloading takes place. This can be anything from the 
word ‘Loading’ flashing on screen, to in this case an 
animated character running around a circle (The movie 
clip named Running Man). 


e You may want to produce a ‘percentage loaded’ style 
bar to show the user how long they have to wait until 
the fun starts. In this case we have produced a simple six 
frame movie clip of a bar graph, with a stop action on 
each keyframe (The movie clip named Graph). 


Insert six or seven blank frames at the very start of 

the main movie and place the animated loader, and 
the progress graph on the first frame, on separate layers. 
Double click on the progress graph and type an instance 
name into the field — in this case we'll call it ‘progress’. 


5 | In order to get the progress graph working, we must 
use a simple tell target to tell the progress graph to 
move forward one frame. Double click on each of the 
keyframes with preloaded symbols, and add an action to 
tell the movie clip with the instance name ‘progress’ to 
move forward one frame. Double click on the keyframe, 
select the actions tab, and click the [+] button, and then 
select Tell Target. Select the instance called ‘progress’ from 
the box on the right, now click the [+] again and select 
Goto from the list, finishing by selecting Next Frame from 
the list on the right. Finally click OK. Repeat this for all of 
the ‘preloader’ keyframes. 


4 | Now we preload the symbols that are causing the 
peaks. Make five or six blank keyframes on a separate 
layer, starting on frame two (after the frame with the two 
loading animations). Start dragging the symbols from the 
library on to the stage, so that they lie outside the stage, 
hiding them from the user's view. In this case we have 
placed them on the stage to show you what's going on. In 
addition, you may want to drop the alpha of these to 0 
per cent to make them truly invisible. Sounds can also be 
preloaded by adding them to a keyframe, and dropping 
the volume to zero. Placing the symbols to be preloaded 
evenly over the blank keyframes produces a gradual 
preload, allowing us to make use of the progress graph. 


loading 


complete 


And that's about it. What you should have now is a 

Flash animation that has an initial peak when loading, 
but presenting the user with an animation, and a progress 
bar while the content loads, leading to a completely 
seamless, glitch-free animation. 


AMD ALE 


2. American bank AB Watley wanted an interactive module on 
their site to attract new visitors. 

3. Matinee was hired by Belgium's Ministry of Science, to 
create their Website. The result was colourful and attention- 
grabbing — and new developments are on the way. 
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Flash is rapidly becoming the most 
dominant format on the Web. With 
powerful scripting, fast downloads 


and groovy animation capabilities, is 
it any nd just when * 


we present 71 essential tips to get you 
using Flash 4 to the max... 


Scale up \ 


Save precious kilobytes in A sh 4 by 
creating vector-based animations with 
50 per cent smaller dimension 
ou intend to display them at. 
embed the resulting Shockway 


layer to still objects, especially when 
you're doing keyframe animation. This 
will help keep file sizes down and make 
than movies play back more smoothly. 


Reuse Symbols | 


required amount using the height and 
width attributes. \ 


draw a new object on screen every time 
a circle is needed, for example. Create a 


fector s better 
Never use a bicep ieee ve \ 


Reduce the umber of vectors in an 
image using Modify>Curves>Optimise. 


Always try to keép-any.objects that 
are made up of a lot of vectors 0 
separate layers. 


71 Flash ti 


file into your Web page, scale up the tead of re-drawing simple shapes, use 
dimensions of the movie by the \ graphic Symbols. Theré’ needto. 


| 


Reduce fonts | 


Try to only use one or two different fonts 
in your movie — the more fonts on 
screen, the larger the resulting file size. 
Simple, sans serif fonts generate a lot 
fewer vectors than fancier decorative 
fonts, too. 


Keep them-together 
Avoid breaking a 
tho u ght it cou Id n 't get an y bette fp al ere will increase the number of vectors ina 


movie scene. | 


Low spec preview 


Bear in mind that Flash animations can 
be affected by the speed of ig ag 
they're played back on. Always try to 


> LL ' 
Optimising Flash \ Separate stills , preview your movie on a low 
\ Place animating objects ona Separate specification computer. | 


Less is more 


Multiple animated objects may put a 
strain on the user's CPU. Avoid filling 
the screen with movement just for the 
sake of it... For similar reasons, scaling 
lots of objects from very small — 
dimensions to very large percentages 


————. . 
can stow-down your movies too. 


Stream small | 
Movies destined for streaming from the 
Web will perform a lot better if you keep 
the initial frames of the ag as 
small as possible. 


Flash tips... 


Fr Rate: 120 tise 
Size: 12KB (126808) | 
Duration: 1 f(0.1 s) 


Control the flow of your movies by tailoring file sizes frame by frame. 


Individual image compression 

Set individual compression options for 
bitmaps within Flash movies by 
selecting them within the Library, then 
going to Options>Properties. However, 
optimising your images in Fireworks or 
Photoshop first, then using the default 


Movie Clips have their own internal 
timeline, independent of the main 
timeline. Existing Flash movies can be 
converted to Movie Clips, or you can 
create them from scratch by going to 
Insert>New Symbol and choosing 
Movie Clip. 


Instead of building animations 
with huge timelines, break them 
into Movie Clip Symbols instead 


compression options, may lead to 
improved results. 


Test bandwidth 

In Test Movie mode, Flash generates a 
temporary SWF version of your current 
movie. To see how the movie would 
perform on the Web, go to 
View>Bandwidth Profiler. A chart 
appears showing the frame rate, size in 
Kb and duration for the current frame. 
To change bandwidth emulation, go to 
Control and select one of the 
predefined modem speeds, or create a 
custom speed of your own. 


Buttons, movie clips and 
ActionScripts 


Break down 

Instead of building animations with 
huge timelines loaded with still 
elements and short instances of 
animation, try breaking down movies 
into Movie Clip Symbols instead. 


Ea web design special 
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Tell target 

The Tell Target command is one of the 
unsung heroes of Flash. Introduced in 
Flash 3 and benefiting from integration 
with variables and strings in Flash 4, the 
Tell Target command releases you from 
the tyranny of the timeline by allowing 
you to animate sequences within Movie 
Clips either from the main timeline or 
from within another Movie Clip. To refer 
to a Movie Clip instance, you first have 
to name the instance by selecting it, 
choosing Modify>Instance and typing a 
name in the Label text box. The Tell 
Target action can then be added to the 
main timeline (using Modify>Frame> 
Actions) to refer to that instance by 
name and trigger playback from a 
specific point. 


Movie Clips 

Using Movie Clips with Tell Target 
makes Flash authoring far more ‘object 
oriented’ than the program is 


traditionally thought to be. This means 
you can create blank Movie Clips that 
contain ActionScript interactivity, name 
the instance of the clip and then call the 
actions from within the main movie or 
from other Movie Clips. You could, for 
example, create a variable that stores a 
series of text strings that is called from 
another Movie Clip on the main stage, 
rather than clutter that clip up with 
extraneous scripting. This is a rather 
primitive way of emulating the user- 
defined Functions that appear in other 


Movie Clips are mini-movies that you can 
control from the main timeline. 


scripting and programming languages 
— but it works! 


Label layers 


Use layers to organise interactivity. 
When you need to add ActionScript to a 
movie, add a new layer and call it 
Actions rather than trying to place it on 
a layer that contains animation. This lets 
you see exactly where everything is on 
the Timeline. Put frame labels and 
sounds in their own layers too... 


Where the Action is 

ActionScript Actions can be applied to 
three different types of object and you'll 
find the Actions tab in the appropriate 
Properties dialogue. They can be 
applied to Buttons, usually but not 
exclusively as the product of a Mouse 
Event and they can be applied to 
individual Frames in a Movie. In the 
latter instance ActionScripts are used 
to trigger events which alter the 
timeline or affect objects on it. You can 
also place ActionScripts on Frames and 
Buttons within Movie Clip Symbols. 
These can be used for anything from 
storing variables, setting object 
properties to controlling animation. 


Different states 


Make sure that you apply button actions 
to the instance of the button that 
appears on stage, rather than to 
different button frame states. 


Edit Symbols 


To apply Actions to a button that’s 
contained within a Movie Clip, you must 


ActionScripts make Flash much more than 
just another animation package. 


go to Symbol Editing mode for that 
Movie Clip, select the button you want 
to edit, then choose Modify>Instance. 


Variable button 


You can build a button that performs a 
different action depending on the 
number of times it’s been clicked using 
Tell Target: 

- Create a Movie Clip containing a 
sequence of several animations. At the 
beginning of each animation stage, 
including Frame 1, insert a Stop action. 
+ Place an instance of the Movie Clip on 
the main stage, select the clip and 
choose Modify>Instance and name it 
‘clipl’. 

+ Create a new button and place it on the 
main stage. Select the button and 
choose Modify>Instance. Click on the 
Actions tab. 

- Under actions, add the following 
ActionScript using the dropdown menu: 


On (Press) 

Begin Tell Target (“/clip1”) 
Go To Next Frame 

End Tell Target 

End On 


Capture keys 

Flash 4 includes an ActionScript 
command that allows you to capture 
keyboard input. Select On MouseEvent 
in the Actions tab of Instance 


Properties for a button and choose Key 
Press. Specify any key you like in the 
text box. 


Drag and Drop 

Want a menu bar that users can drag 
and drop anywhere on screen? 

- Create your menu or navigation bar as 
normal. Before you finish, place a 
rectangular button Symbol at the top of 
the bar. 


+ Select all the components of the 
menubar and use Insert>Convert to 
Symbol to turn it into a Movie Clip. 


«Click the Edit Symbol icon in the top 
right of the stage and select the clip you 
just created. Select the rectangular 
button Symbol at the top of the bar and 
choose Modify>Instance. 


dialogue using the dropdown menu: 
On (Press) 

Start Drag (“”) 

End On 

On (Release) 

Stop Drag 

End On 

Go to Control>Test Movie to try out 
your handiwork. 


- Add the following script in the actions 
| 
| 


Cn Ca et ete | 


Control freak 


The ActionScript command Set 
Property can be used in conjunction 
with Movie Clips to seriously trim back 
the need for Keyframe animation. Clip 
Properties you can directly set include 
the co-ordinates, scaling, rotation, 
alpha transparency and name. 


Publishing 


Chop it up 

If you have a large, linear Flash movie it 
might be better to break it down into 
smaller segments before publication. 
Using the Load Movie action you can 
then start playing segment 1 of a movie 
while segment 2 downloads in the 
background either into an existing 
Movie Clip, or into a new Layer. 


Loop while... 


Use a small loop using the If Frame Is 
Loaded action at the beginning of a file 
to play while the rest downloads. This 
may not make the file size any smaller, 
but it will play back more smoothly than 
if you attempt to stream it raw. 


Templates 

Flash comes with several templates for 
publishing files. These are standard 
HTML files including string variables 
that are quite easy to understand. You 
can create your own by duplicating one 
of the files in the Flash 4/HTML folder 
and editing it in a standard text editor. 
You can download an updated set of 
templates from Macromedia’s site at [w] 
www.macromedia.com/support/flash/ 
downloads.html 


Make your own templates or download some 
from the Web. 


Print frames 

In the newest versions of the Flash 
Player, users can print frames from your 
movies with the context sensitive menu. 
By default every frame in a movie is 
printable, but you can change that. 
Select a frame in your movie that you 
want users to be able to print out and go 
to Modify>Frame. In the Labels tab type 
in the name text ‘#p’. Now only that 
frame will be printable. You can add this 
label to as many frames as you like. 


Quick publish 

If all you need to do is create a 
Shockwave Flash version of your file 
rather than create all the auxiliary 
documents that go with it, the 
File>Export Movie command is far 


quicker than using Fi 
use Export Movie 


do is update a SWF file th: 
already placed in an HTML 


Workflow tips 


Name layers 


Name your layers rather’ 
them as the default La 
so on — it'll help you find 


easily. 


Outlines only 
When working on co 


you can speed up Flash 


into Outlines mode. 


assigns a different col 


You can change the 
Modify>Layer and 
outline colour from 


No go slow 

By converting anime 
different Layers to N 
safely reduce the ni 
Layers ina movie 
slow down you get 
include too many * 
elements on one 


Be prepared | 


To quickly 
the actions 


Wired for sound 
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Complex animations can generate a lot of layers, sort them out by naming them. 


play for the number of frames available 
in the movie. 


Loop the Loop 

Enter a value in the Loop box of the 
Frame Properties>Sound dialogue to 
chose how many times you want a 
sound to repeat. You can't set a sound to 
loop indefinitely, but you can set a very 
high loop number. 


Start and stop 

To control exactly where sounds start 
and stop in your Flash movie, simply 
place the sound file in a movie clip and 
set it to stream in Properties. Then 
place the Movie Clip on the stage and 


Set compression for every sound at once, or 
be more selective. 


give it an instance name. Finally you 
should use Tell Target from the main 
timeline or from a button to either play 
or ‘park’ the clip. 


Flash in Director 


You can use simple ActionScript commands in 
Shockwave Flash files embedded in Director 


movies to harness the power of Lingo. In this 


example a Shockwave Flash button triggers a 
Director sound event, but the same technique 


can be used for more complex actions. 


+ Create a new button in Flash, then in the 
Actions section of the Properties dialogue 


AlLMP3 

In Flash 4 you can export all sound in 
SWF files in MP3 format from the 
File>Publish Settings dialogue — which 
means you can safely ignore any 
previous advice that says you should 
use low-quality sound files at the 
development stage. In fact, use the best 
quality sounds you can while you're 
building your movie and use the best 
compression settings for the job at the 
publication stage. 


Selective sound 


If you want to be more selective about 
how Flash exports individual sounds, 
highlight the chosen sound in the 
Library, then go to Options >Properties 
from the Library Palette drop-down. 
Short button sounds don't need to be as 
high quality as musical loops. 


Drawing and animation tools 
Alpha gradients 


Use Alpha transparency across a 
gradient fill to create a unique effect. 

* Create a new shape, then go to the Fill 
Colour icon. Click the colour palette 
icon in the dialogue that appears. 

* Click New and create a new gradient. 
Leave one colour at 100 per cent alpha, 
adjust the other to around 10 per cent. 

* Fillin the shape with the fill tool using 
the new gradient. 

- As you move the gradient filled object, 


+ Export the button as Shockwave Flash, then 


import it into Director 7 or 8. 


+ In Director create a global script using the 
name of the event we entered into the URL 
field. For example, a Shockwave Audio cast 
member could be triggered with the script 

‘playmember <castmembername>’. 


you'll notice that you can see the 
background through it. Good for 
dropdown menus and general lighting 
effects. 


Pull points 


To extrude single points from a curved 
surface, position the arrow cursor until 
it changes to the ‘curve’ Symbol, then 
hit [Alt] or [Command] on the Mac, click 
and drag away from the shape. 


No slicing 

To prevent shapes and lines on the 
same layer ‘cutting’ into each other, 
convert them into graphic Symbols 
before attempting to overlay them. 


Constrain lines 

Holding down [Shift] while drawing 
straight lines constrains them to 45 
degree intervals. 


Rectangular angle 

Pressing the ‘up’ and ‘down’ arrows on 
the keyboard as you draw a rectangle 
adjusts the radius of rounded corners. 


Trace layout 


In a similar way to the use of tracing 
images in Dreamweaver, you can add 
design artwork to Flash that acts as a 
layout tool. Designing your layout in an 
imaging package or scanning ina 
sketched design. Import the artwork 
into a new, empty layer. Double click on 
the document icon next the layer name 
to open Layer Properties and set the 
Layer Type to Guide. Lay out your movie 
based on the guide layer. When 
published, guide layers are invisible. 


Motion Tweening 

Flash 4 made animation with Motion 
Tweening a lot easier than in previous 
versions. Begin by placing a Keyframe 
on the timeline, and with it still selected 
import or draw the object you want to 


animate on the stage. Choose 
Modify>Frame and under the Tweening 
tab select Motion. Next, insert a second 
Keyframe further along. Flash 
automatically creates a tweened 
animation between the two Keyframes. 
Select the second Keyframe and add 
alpha, rotation, colour, or scaling 
transforms to the object on stage — or 
simply move it to a new position. 


Shape Tweening 


Motion Tweening only works on 
Symbols. Shape Tweening only works 
on shapes — any number of shapes you 
like. To morph a primitive shape into 
text for example, begin by inserting a 
Keyframe in the timeline and draw a 
circle on the stage. Add a second blank 
Keyframe to the timeline and add some 
(suitably chunky) text to the stage. With 
the arrow pointer selected, click and 
choose the text object, then go to 
Modify>Break Apart. Select a frame 
somewhere between the two Keyframes 
on the timeline and choose 
Modify>Frame in the Tweening tab, 
choose Tweening:Shape. 


Tweened clips 


To apply Motion Tweening to tweened 
shapes, cheat. Create the Shape Tween 
as a Movie Clip, then Motion Tween the 
Movie Clip. 


Motion Guides 


Guide Layers can also be used as 
Motion Guides for Tweened animation. 
Motion Guides are paths that your 
tweened animation follows. Start by 
creating a Motion Tween as we 
described before. Select the Layer 
containing the tweened animation, then 
click on the blue Add Guide Layer icon 
on the bottom left of the Timeline 
window. Draw a path in the new Motion 
Guide layer using any of the tools 
available, then click back on the layer 
containing your animation. Select the 
first Keyframe of the animation and 
move the symbol on stage to the start 
of the path, then select the last 
Keyframe and move the symbol to the 
path’s end. 


Flash on the Web 


Easy detect 


You can detect the presence of Flash 
without reams of JavaScript. Publish a 
small Flash animation to a page using 


choose Get URL in the Action field. Inthe URL — «Whenrunning the movie, clicking on the 
field type ‘event: name of event’ where ‘name Shockwave Flash button triggers the Lingo 
of event’ is a Lingo script we'llimplement later. event. 


the Flash 4 With Image template. Next 
give the user a choice of pathways — a 
link to your Flash enhanced site if 
they’re able to see the animation and 
a link to an HTML page if they don't... 


ActionScript can be used to communicate 
with Lingo and vice versa... 


web design special 


No gutter 

If a user has the capability to view 
Shockwave Flash movies in their 
browser, you can link directly to the file 
rather than having to embed it in HTML. 
The main advantage of this approach is 
that the Flash file will display without 
any ‘gutter’ — a border that appears in 
Netscape Navigator browsers around 
embedded files. 


High quality 

You can set the playback mode of a 
movie to High within the animation 
rather than as an HTML parameter. Do 
this by selecting the first frame of your 
movie and going to Modify>Frame. 
Click the Actions tab and click on the ‘+’ 
sign to add a Toggle High Quality action. 
Export as Shockwave Flash as usual. 


Talk to the Web 


Launch Web pages from within Flash 4 
movies in any window or frame you like 
using the GetURL action. Start by 
creating a button in your movie, then | 
selecting it on the stage and choosing 
Modify>Instance. In the Properties 
dialogue, select Actions then click on 
the ‘+’ for to access the drop-down menu 
of available actions. Choose GetURL, 
then type in the Web address you want 
in the URL dialogue, including the ‘http’ 
part (http://www.macromedia.com, for 
example). The next stage, where you 
define the browser window or frame 
accesses HTML properties directly and 
can be very flexible. If you have a 
frames-based page you can type the 
name of frame you want to target into 
the Window text box. Alternatively, you 
can use ‘_blank’ to launch a new 
browser window with the targetted URL 
in it. Of course, Web pages you point to 
can contain Flash movies too. 


Full paths 

Although you can use relative URLs in 
Flash, to maintain maximum file 
portability it’s always recommended to 
use full paths. 


Alternative Flash 

Macromedia Flash isn't the only 
package with which you can create 
Shockwave Flash files. Macromedia 
recently released the SWF as Open 
Source. And there are already several 
Flash-a-likes that have appeared in 
response since... 


3D Flash 


3D animations in Flash used to be 
horrendously complicated to create. | 
Using a package like 3DS Max, you had 
to individually vectorise each frame and 
import them into Flash. Now there are 
at least two standalone packages 


B Welcome to SWiSHzone - Microsoft Intemet Explorer 


[Ble Edt Yew Favertes Tools Help 


“TI 
_ 
» 
n 
Pm 
Casa 
= 
Be) 
a“ 


$-49 O89 aa9 5-3: 


Sensational Demo by Blurb! 


if vod 
fi 


or 


available. The older, more modestly 
priced Vecta3D lets you import 3D 
models, extrude 2D shapes and 
animate them. A trial version is 
available for download from 

[w] www.vecta3d.com. Swift3Dis a 
more sophisticated affair with shading 
capabilities. See some examples of 
what it can do at [w] www.swift3d.com. 
Read the specifications carefully 
though, there's no trial version. 


Flying letters 

Shockwave Flash is becoming a 
popular format for creating ad banners 
—and that’s exactly what SwiSH is best 
at. Exporting to SWF format, SWiSH 
just creates text effects using a range of 
preset actions. Exploding text, fading 
text, zooming text — you name it SwiSH 
has got it. At only $30, it’s worth having 
to speed up development alongside 
Flash. Download a trial or buy a copy 
from [w] www.swishzone.com. 


Flash clone 


BeOS users don't have to be left out of 
the Flash revolution — at least on the 
authoring side. Moho from Lost Marble 
is an animation package that shares 
many of the same features as 
Macromedia Flash, including vector 
drawing and timeline-based Keyframe 
animation. Available in BeOS and 
Windows flavours, it beats Flash on 
price at $99. Get an evaluation version 
from [w] www.lostmarble.com 


LiveMotion 

The big news is that Adobe has created 
a graphics and web animation package 
that exports to SWF. It lacks a Lot of 
Flash’s interaction routines — but the 
timeline metaphor is more object 


Nothing does text effects better than SWiSH... 
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[Buyer's Guide] 


Need a little inspiration? Maybe you’ve been seeking that elusive plug-in too long? Search 
no more — simply refer to our essential guide to the best packages on the market... 


Acrobat 4 
PC/Mac « £188 - Adobe 
t 020 8606 4000 

w www.adobe.co.uk 


Thanks to its tight integration with MS 
Office and other leading programs, it’s 
now as simple as clicking a button in 
the toolbar to convert documents or 
Websites into PDF (Portable Document 
Format) files that preserve appearance 
but allow for access across the range of 
hardware and software set-ups. 


BBEdit 5.1.1 

Mac « £116 - Mygate 

t 020 8297 9699 

w www.barebones.com 


One of the best tools for manipulating 
and searching text for the Mac, many of 
BBEdit’s features have been developed 
for Web authors who wish to edit HTML. 
Thanks to a built-in table designer and a 
Web-safe colour palette, this is one of 
the best such apps for the Mac. 


BeyondPress 4.0 

PC/Mac « £199.99 - Computers Unlimited 
t 020 8358 5857 

w www.extensis.com 
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Dreamweaver 3 supports on-the-fly content, 
an essential feature for corporate sites. 


web design special 


The plug-in of choice for Web designers 
with a penchant for the print traditions 
of QuarkXPress, this XTension will 
output existing or newly designed 
Quark pages into Web-ready HTML, 
and add hyperlinks, Java applets, 
animated GIFs, QuickTime movies and 
image maps with consummate ease. 


Canoma 

PC/Mac + £399 - Computers Unlimited 
t 020 8358 5857 

w www.metacreations.com 


Optimised for Web standards like 
MetaStream and VRML2, Canoma will 
take ordinary 2D photographs and 
create textured 3D models from them. 
Despite its limitations, it works well 
with simple geometric shapes such as 
buildings and textures captured directly 
from the original photo. 


CoolBE Light Edition 
PC/Mac - Free - CoolBE 

e tech@coolbe.com 

w www.coolbe.com 


CoolBE Light Edition is supplied for free 
in return for reciprocal advertising 
space on your site. For this laughable 


Designed to complement Dreamweaver, 
Fireworks is the best Web graphics tool. 


outlay you receive an app which can 
easily design animated Java banners 
and billboards out of any text, JPEG or 
GIF images. You can make your design 
scroll marquee-fashion, or zoom and 
slide across the screen. 


CorelXARA! 2 
PC -$109.95 - Corel 

t 0207298 8505 

w www.corel.com 


CorelXARA! 2.0 will substantially assist 
the accessibility of your Website by 
tightly compressing all your JPEG, GIF 
and animated GIF images before you 
export them. It also supports Photoshop 
plug-ins for bitmap effects and will 
even provide you with an estimated 
download time for the images it creates. 


DeBabelizer Pro 4.5 
PC - £325 - Computers Unlimited 
t 020 8358 5857 

w www.equilibrium.com 


Ensuring the consistency of your 
company or brand image across a range 
of media is a lot easier with 
DeBabelizer Pro, which optimises the 
same sets of images not just for 


Crossing the floor from the world of CD 
design, Director 8 is a powerful Web app too. 


Websites, but also for other forms of 
print and multimedia publications and 
presentations including digital video. 


Director 8 Shockwave 
Internet Studio 

PC/Mac - £939 - Computers Unlimited 
t020 8358 5857 

w www.macromedia.com 


Unsurpassed as yet, Director is still the 
definitive site designer thanks to its 
ability to create and add Shockwave 
multimedia, such as animations and 
games, to your pages. With support for 
sound, video, Java and XML, Directoris 
the most flexible but comprehensive 
tool for the earnest Web designer. 


Dreamweaver 3 

PC/Mac « £351 + Computers Unlimited 
t 020 8358 5857 

w www.macromedia.com 


Apart from its beautifully executed 
integration with Fireworks, 
Dreamweaver also boasts a suite of 
easy-to-use editing tools which enable 
WYSIWYG Web authoring and 
additional tag modification from the 
same view. Fast rivalling its sister 
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Macromedia tops the tree in all aspects of 
Web design, with Flash providing animations. 


product Director as the design tool of 
the professional, though for rather 
different purposes. 


Drumbeat 2000 
eCommerce edition 
PC - £399 - Computers Unlimited 
t 020 8358 5857 
wwww.macromedia.com 


An invaluable tool for on-line shop 
construction, Drumbeat simplifies 
complex routines such as basket total 
calculations, loyalty reward points and 
automatic order confirmations. On top 
of that, it is also secure and can handle 
thousands of products at once. 


Electrifier Pro 

Mac : $395 - Electrifier Inc 
t 001919 806 4000 

w www.electrifierpro.com 


Add a bit of zest to your Web pages with 
this sparky package which adds MIDI 
music, animations and digital sound to 
your site via a drag-and-drop interface 
which exports to standard cross- 
platform file types including animated 
GIF and QuickTime movies. 


Fireworks 3 

PC/Mac - £210 + Computers Unlimited 
t 020 8358 5857 

w www.macromedia.com 


The latest version of Fireworks builds on 
the success of its predecessors by 
including support for attaching HTML 
and JavaScript to graphical objects. By 
optimising images for Web viewing and, 
most importantly, making vector based 
graphics easy, it has become an almost 
indispensable tool for sophisticated site 
designers. 


Flash Writer 

PC/Mac : free - Macromedia 
t 01344 458 600 | 
w www.macromedia.com 


This free plug-in for /llustrator enables 
you to export graphics as Flash files 
without the need to reformat them from 


Acrobat works alongside other packages to 
preserve the integrity of your pages. 


bitmap form. Although it cannot handle 
the sound and interactive elements 
which make Flash itself so popular, it is 
a handy extra for speeding up Web 
image manipulation. 


Flash 4 

PC/Mac « £304 - Computers Unlimited 
t 020 8358 5857 

w www.macromedia.com 


With added support for MP3 audio and 
new features such as editable text 
boxes and scripting commands, Flash 
has consolidated its position as the 
standard for vector animation, despite a 
strong challenge from the latest version 
of Fireworks. 


Freeway 2.0 

Mac - £199 + SoftPress Systems 
t 0800 7313425 

w www.softpress.com 


An incredibly simple HTML writer 
capable of producing professional 
looking results quickly, Freeway 2.0 is 
an excellent all-in-one authoring tool 
for the Mac which incorporates 
WYSIWYG layout tools and graphic 
optimisation. What it lacks in 
sophistication it makes up for in terms 
of accessibility. 


FrontPage 2000 
PC - £105 - Microsoft 

t 0345 001000 

w www.microsoft.com 


Microsoft’s premier Web page designer 
doubles as an effective site 
management tool which automatically 
updates internal hyperlinks whenever 
you alter your pages. It also features 
comprehensive controls for Dynamic 
HTML, ASP and cascading style sheets 


Generator 2 

PC/Mac « £2349 - Computers Unlimited 
t 020 8358 5857 

w www.macromedia.com 


Designed to create rapidly changing, 
interactive or on the fly Web page 


New features make Paint Shop Pro 6 ideal for 
image manipulation and Web optimisation. 


elements such as advertising banners, 
calendars, charts maps and headlines, 
Generator now includes a very useful 
drag-and-drop objects palette to speed 
up the process of information 
management and distribution via the 
Internet even further. 


GIF Construction Set Classic 
PC - $20- Alchemy Mindworks 

t 001 905 936 9501 or 

e sales@mindworkshop.com 

w www.mindworkshop.com/alchemy/ 
gifconcl.html 


For a very reasonable $20, GIF 
Construction Set Classic provides you 
with everything you need to create all 
forms of GIF, optimised for the Web. 
Thanks to its more advanced features it 
is also quick and easy to create banners 
and animations for your Website 
without complex coding. 


GoLive 4 

PC/Mac * £210 - Adobe 
t 020 8606 4000 

w www.adobe.co.uk 


While the site management side of this 
developer has been improved for this 
latest version, GoLive's strengths have 
always been in its broad but incredibly 
powerful range of tools which offer 
everything from simple HTML authoring 
through JavaScript, Dynamic HTML and 
QuickTime movie creation. Version 5 is 
due any day now. 


Headline Studio 

PC/Mac « £210 + Computers Unlimited 
t 020 8358 5857 

w www.metacreations.com 


Not the best in its field but certainly an 
acceptable alternative, Headline 
Studio is a package which will produce 
banner ads for your site. Its main 
drawbacks are the lack of an internal 
image editor and the final size of the 
ads created, although it does handle 
text and layout well. However, there are 
better and cheaper ways of doing this 
sort of things. 


For a fraction of the price of other apps, 
HoTMetal Pro has all core Web design tools. 


HomeSite 4.5 
PC - £71.25 Unipalm 
t 01638 569 600 

w wwwaallaire.com 


Acomplete site management and 
advanced WYSIWYG HTML generator, 
HomeSite handles all the latest 
versions of emergent Web technologies 
such as Dynamic HTML, JavaScript and 
cascading style sheets, while producing 
pure HTML pages, to make sure that 
visitors to your Website won't have to 
suffer lengthy download times. 


HotDog Express 

PC - $39.95 - Sausage Software 
t 001 03 9662 2627 

w www.sausage.com 


Express is a cut down version of 
powerful big brother HotDog 
Professional, and is one of the best 
routes into Web design for the novice 
programmer. While you cannot edit 
existing HTML pages using Express, it 
does serve as a complete authoring and 
publishing tool for functional but 
formulaic Web pages. 


HotDog Professional 5.5 
PC + $129.95 - Sausage Software 

t 00103 9662 2627 

w www.sausage.com 


A more comprehensive application than 
the limited Express, Hot Dog 
Professional not only supports all forms 
of code-based HTML authoring and a 
complete set of management tools, but 
it also includes support for multiple 
users to work on a Website at the same 
time over a local network — an 
increasingly invaluable facility for large 
professional environments. 


HTML Assistant Pro 

PC + $89.95 - Exito Digital Systems 
e info@exit0.com 

t 001 902 835 2867 

w www.exit0.com 


Because HTML Assistant Pro converts 
pages directly from rich text format files 


As you would expect, Photoshop 5.5 has 
embraced Web-friendly features. 
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into Web-ready HTML, you can import 
documents straight from a word 
processor with ease. It also supports 
live previewing and checking of your 
pages in any browser and the insertion 
of multimedia tags into your work. 


HoTMetal Pro 6.0 
PC + £116 - Softquad 

t 020 8387 4110 

w www.softquad.co.uk 


For the price, HoTMetal Pro 6.0 is one 
of the best complete suites of tools for 
HTML authoring and general site 
management, thanks to its intuitive 
drag-and-drop interface, in-built 
graphics manipulation utility and 
additional server software bundle. 


HTMLed PRO 3.0 

PC - $59.95 

Internet Software Technologies 
e sales@ist.ca 

wwww.ist.ca 


Another complete site authoring 
package with support and tools for 
creating cascading style sheets, 
animated GIFs and image maps, 
HTMLed Pro also features syntax 
checking and an FTP interface. 


IBM HotMedia 2.5 
PC/Mac - free - IBM 

t 0990 426 426 

w www.ibm.com 


If you want to spice up your sites with 
animations, streaming audio, visual 
effects and panoramas, HotMedia 
could well save you and your viewers a 
lot of time and aggravation. You don't 
have to load separate plug-ins to view 
these special effects — HotMedia sites 
determine what software is required. 


ImageStyler 1.0 
PC/Mac - £104.50 - Adobe 
t 020 8606 4000 

w www.adobe.co.uk 


A WYSIWYG designer for creating 
HTML effects without the HTML, 


Painter 6: the best natural media graphics 
package, and also full of handy Web tools. 
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ImageStyleris great for giving a site a 
little jazz. Not only does it optimise all 
its output for the Web, but also enables 
the creative user to introduce simple 
Java effects, such as rollovers, and 
image maps with a simple interface. 


NetObjects Fusion 4.0 
PC - £234 - Twilight Zone 

t 01923 801 812 

w www.netobjects.com 


Fusion is a veteran site design tool, 
which has adapted its already strong 
and much admired site management 
facilities to include a superior point and 
click interface for adding pages with 
Dynamic HTML commands, audio and 
video files and Java. 


Netscape Composer 
PC - free - Netscape 

t 020 8564 5100 

w www.netscape.com 


Not the best but certainly the cheapest 
WYSIWYG design tool, Composer is 
included free with Netscape 
Communicator and handles simple 
Web pages with ease. Although limited, 
it will generate all the basic HTML 
commands for a working site. 


Paint Shop Pro 6.0 

PC - £106 - Digital Workshop 
t 01295 258 335 

w www.digitalworkshop.co.uk 


JASC’s hugely successful and more 
than moderately powerful image 
editing app has a range of Web specific 
tools, including the ability to create and 
edit vector graphics. It also comes 
bundled with Animation Shop 2 for 
adding movement to your designs. 


Painter 6 

PC/Mac £299.99- Computers Unlimited 
t 020 8358 5857 

w www.metacreations.com 


If you fancy trying your hand at being an 
old master, Painter is the perfect tool. It 
enables the artist to mimic traditional 


Splash is a low-cost and Web authoring 
program which is ideal for beginners. 


media when designing digital images, 
and comes complete with several Web 
specific functions. 


PhotoTools 3 

PC/Mac « £99.99 - Computers Unlimited 
t 020 8358 5857 

wwww.extensis.com 


PhotoTools features a range of special 
effects tools for image manipulation, 
with a series of command sets just for 
Web design. Bundled with a GIF 
animation program, PhotoAnimator, this 
update also features new support for 
shadow effects and bevel shapes. 


Photoshop 5.5 
PC/Mac * £399 - Adobe 
t 020 8606 4000 

w www.adobe.co.uk 


Long the most complete graphics app 
for professional designers, it’s no 
surprise that Photoshop 5.5 has been 
empowered with Web-friendly extras. 
Packaged with ImageReady 2.0, an 
optimisation tool for net images, it 
remains the must-have image app. 


Quarkimmedia 1.5 
Mac only £464 - Quark 

t 01483 445 566 

w www.quark.co.uk 


Quarklmmedia enables designers to 
add hyperlinks and interactive 
multimedia to standard Quark 4.02 
pages without the need to reformat. The 
software required to play the multimedia 
is free, and the whole package is perfect 
for creating cross-media presentations. 


QuickTime 4 Pro 
PC/Mac - $29.99 Apple 
t 0870 600 6010 
w www.apple.com 


The authoring tool for QuickTime 
movies is a complete editing package 
ideal for short Web movies. It includes 
support for streaming media so that 
visitors to your site can download and 
watch video clips simultaneously. 


RealProducer 7.0 
PC/Mac - free - RealNetworks 
t 0870 240 2486 

w www.realnetworks.com 


Although the freely downloadable 
RealProducer features everything you 
need to add streaming RealAudio and 
RealVideo to your site, registering for 
the commercial version gives you better 
quality output and enables you to 
customise the codecs to your taste. One 
of the staple Web video formats. 


Splash 1.2 
PC - $49.95 - Beam International 
w www.gosplash.com 


All you need for quick drag-and-drop 
Webpage design, Splash also includes a 
speedy wizard for creating Java applets 
to liven up your site. The only drawback 
is that you cannot edit the basic HTML. 


Superscape 3D 
Webmaster 

PC - £600 - Superscape 
t 01256 745 745 

Ww www.superscape.com 


Not yet a common way of presenting 
Web pages, adding a touch of 3D 
interactivity can keep your site one step 
ahead of the rest. Superscape enables 
you to create Web-ready 3D worlds and 
then publish them as VRML or in its 
own, more compact, format. 


StyleMaster Pro 

PC/Mac - $49.99 - Western Civilisation 
e sm-info@westciv.com 

w www.westciv.com 


Cascading style sheets are now a stock 
feature of most HTML editing packages, 
but if you are unable to upgrade your 
older software, StyleMaster Prois a 
handy point-and-click interface for 
creating CSS files separately and then 
importing into existing HTML. 


Viscosity 
PC - $179 Jedor Inc 
w www.jedor.com 


Viscosity is a Windows image and video 
editing package, which enables you to 
perform edits on single frames or entire 
movies and preview your work without 
having to re-render each time. 


WebExpress 3 

PC - £57.58 - The Thompson Partnership 
t 01889 564 601 

w www.ttp.co.uk 


Despite its lack of support for Java 
applets, WebExpress 3 is an affordable 
first-time WYSIWYG package. It will 
generate tables, frames and style sheets, 
but doesn't allow HTML tweaking. 


Xara3D 3 
PC - $39- Xara 
t 01442 350000 
w www.xara.com 


A complete tool for designing and 
rendering 3D text, Xara3D gives you 
control over all aspects such as lighting, 
depth, position and bevel, and exports 
images or animations for the Web. EEE 
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Computer Arts Photoshop 
Special — 

It’s 100 per cent Photoshop! Don't 
miss 28 new tutorials and skills, 
and our ultimate guide to plug-ins. 
Plus 17 great text effects to bring 
your type to life, and 101 hints and 
tips to make you a smarter 
Photoshopper. And create the 
sharpest Websites with 
ImageReady 2. 

CD KPT Equalizer— a brand new 
full plug-in from Metacreations 
that’s not available anywhere else 
in Europe (dual). Plus 23 plug-in 
demos, and free pics worth 
£1290 from Stockbyte. 


Available now! 


:computer arts 
Exclusive full los ie 


Hal feaver 3 


& Fireworks 3 


Issue 41 — 

Dreamweaver 3 tutorial, Smoke & 
Mirrors profiled, Maya 2.5 reviewed. 
CD Three free typefaces! 


Computer Arts 3D Special — 


Be inspired by our latest 3D 
special. Our modelling section will 
improve your skills with tutorials 
on the creation of Bullfrog's Dark 
Mistress, a monster shark and an 
alien insect. Meet the makers of 
Walking With Dinosaurs, and visit 
Europe's largest motion capture 
studio at Audio Motion. Plus 63 
tips on lighting and rendering. 

CD trueSpace 3/SE — a full 3D 
application (PC only), plus 10 DXF 
meshes from Viewpoint Digital, 15 
textures from Picture Garden. 
Seven demos and showreels. 


Available now! 
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All Back issues cost 


Computer Arts Web Special — 


It's 100% Web design, with 175 
essential tips, 12 all-new pro 
tutorials and the secrets behind 
on-line interactivity revealed. Be 
inspired by the world’s greatest 
splash screens, meet some of 
Britain's most cutting edge Web 
designers, and enter a whole new 
dimension with a look at 3D on 
the World Wide Web. 

CD Fireworks — full Web graphics 
application (dual), plus NetObjects 
Fusion 2.02 (PC only), a complete 
site design program, and demos 
including Dreamweaver 3. 


Available now! 


Issue 42 — 

Colour management, Fireworks 3 
and Photoshop tutorials. 

CD Free CorelDRAW 8 LE (Mac)! 


Issue 43 — 
Cinema 4D XL 6 tutorial, InDesign 
tips, eight 21-inch monitors tested. 


CD Fusion 2 FREE & Fusion 5 demo. 


[10/06.00] 


6. Postage free in UK. Add £1 per issue for European orders. Add £3 per issu 
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Computer Arts DV Special — 


Enter the world of digital video, 
with a little help from our 101 
professional tips. Discover how to 
create a pop promo for MTV for 
under £500. Follow our expert 
tutorials showing you how to edit 
your footage with style, and all the 
latest software and hardware is 
reviewed, with a special look at 
Apple's Final Cut Pro 1.2. 

CD MediaMania Video (PC only), a 
complete suite for creating your 
own video effects. Plus quality 
royalty-free footage and effects, 
and a digital video demo collection. 


Available now! 


Issue 44 — 


Adobe LiveMotion beta, Final Cut 


Pro review, scanners round-up. 


CD LiveMotion beta & free fonts. 


of the world 
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Computer Arts 3D Special — 


Think 3D is too difficult for you? 
Think again. The latest 3D Special 
will explain the tips and 
techniques from beginner to 
advanced. There are tutorials for 
LightWave, Maya, 3D Studio MAX, 
83 tips for the top packages, and 
inspiring profiles from pros and 
amateurs alike. Plus, how to get a 
job in 3D, resources, and more. 
CD PIXELS3D/2.1.4 full version 
(Mac only), a complete tool for 
modelling, rendering and 
animating. Plus demos of Cinema 
4D XL 6, Bryce 4 and lots more. 


Available now! 


Issue 45 — 

FreeHand 9 tutorial, photorealistic 
3D Skills, Discreet Combustion*. 
CD FreeHand 9 & trueSpace demo. 
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Need a little inspiration? Maybe 


you've been seeking that elusive plug-in too long? Search no longer... 


Useful resources 


The Ultimate Counter 


www.ultimatecounter.com 


So you want to add a hit counter to your site to see how 
many visitors you get? This is the place where you'll 
find what must surely be the Web’s most popular 
counter service, with over 400 million counters in 
operation! You can use the basic service for free, and a 
small upgrade fee gives you more advanced options. 


The Yell Web Awards 2000 


http://free-programs.com/develop.shtml | 


Why waste your valuable time trying to find the best 
Websites or the best Web tutorials and utilities when 
this site has done it for you? One visit here isenoughto | 
stock your library with the essential site construction 
tools and the know-how to use them. 


Bellsnwhistles.com 


www.bellsnwhistles.com 


Building your Website can demand a great deal of | 
resources, such as graphics, applets, programming | 
help, music files, construction tools and more. This site 

is the definitive starting place, with literally hundreds 

of files for you to download and use free of charge. | 


The Java Centre 


www.java.co.uk 


HTML might be fine for basic page design, but when 


Let someone choose the best sites and tools for you at the Yell 


Awards page. 
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you want interactivity, you're going to need a language 
such as Java. The Java Centre is a central resource for 
all things Java in the UK, from news and events to book 
reviews and code snippets. There’s even a series of 
Java applets available for download. 


FreewareJava.com 


www.freewarejava.com 


You can really add some excitement to your Website 
using Java applets, and this is certainly a great place to 
start your search. It contains 670 downloads, not to 
mention links to Java e-zines, 23 tutorials, jobs and 
more besides. It’s also a very clean, functional site to 
find your way around. 


Anfy Team 


www.anfyteam.com 


Java applets can make your personal home page much 
more attractive to look at, and hold people’s attention 
for much longer than plain text and graphics sites. Anfy 
is a versatile application that creates a plethora of 
effects that will really make your site pop! Be there or 
be square... 


Meta-Builder 2 


http://vancouver-webpages.com/META/mk-metas.html 


If you're creating your page using raw HTML, rather 
than with a program like FrontPage or GoLive, it can be 
a real pain to generate the Metatags that are used by 
search engines to index and find your site. This cool on- 
line program does all the work for you. Simple but 
devastatingly effective. 


Dr Website 


www.nerdworld.com/users/dstein/nw405.html. 


No matter how good you think your knowledge of Web 
programming is, you’re bound to encounter problems 
from time to time, especially when new versions and 
commands are appearing almost daily. This site is a 
huge archive of questions and answers on all things 
Internet, and better yet, they're categorised for your 
browsing convenience. 


Web Building 


www.help.com/cat/4/index.html?tag=st.hp.fd.ont.cat_4 


There are times when it’s not enough just to read an 
FAQ or browse through an archive or previous 


Welcome To Anfy Home Page 


Tip. Boukmork / Add to tovarites the ste aed comme back for news! 


the tea waned! wou Somrons 


Help your site to stand out from the rest with Anfy Team's 
magnificent Java applets. 


questions. Sometimes you need to ask questions and 
get answers yourself. This site hosts a huge number of 
Web-related question and answer forums, and links 
directly into many newsgroups too. 


Graphics and 
design 


Spooky and the Bandit 


www.spookyandthebandit.com 


We've included this site purely for its aesthetic and 
inspirational value. Although many surfers dislike the 
format, 108 million PCs and Macs are capable of 
viewing Shockwave content, and sites that host such 
material can expect viewers to stick around on average 
twice as long. This site uses Shockwave extensively, 
and to great effect. See page 18 for more. 


Computer Arts 


www.computerarts.co.uk 


The recently redesigned and relaunched Computer 
Arts Website it the central repository for all things 
creative — news, reviews, tutorials, a forum and more. 
With breaking news and daily tips, it’s the essential 
resource for all creative folk. Whether you're a art 
director or you're just starting on your first Website, 
you'll find something for you here. 


Computer Graphics on the Net 


http://ls7-www.cs.uni-dortmund.de/cgotn/ 


It often seems as though America virtually owns and 
runs the entire Internet, which is why it’s refreshing to 
discover this European links site. Unlike most sites, 
which concentrate on mainstream computer graphics, 
this scholarly site provides links to sites that focus on 
graphics development and science. 


Adobe Systems 


www.adobe.com 


It's home of one of the world’s favourite graphics 
companies, but it’s more than that, it’s also the clearing 
house for a lot of complementary products that you 
could spend months chasing down elsewhere. Of 
particular interest is the plug-ins page. And the Adobe 
Forums are a great place to talk to others in your 
business to sort problems and exchange views. 


Creating Graphics for the Web 


www.widearea.co.uk/designer 


Although this is a relatively compact site, it’s dedicated 
to the issues of Web graphics. It discusses the 
differences between file formats, talks about image 
maps and buttons and even offers tips on optimising 
Photoshop and other graphics programs for the Web. 


View point 
www.viewpoint.com 


Probably the major player in the world of serious 3D 
models, Viewpoint has an extensive catalogue of 
movie-quality datasets costing from under £20 to 
hundreds of pounds each! They will also build models 
to your precise requirements. There’s a complete on- 
line catalogue, which is fun to ogle over, even if you 
can't afford much... 


Zygote 
http://store.zygote.com/ 


Good, high quality 3D models are hard to come by, but 
Zygote is one of the major players in the market. Unlike 
Viewpoint, whose models (although excellent) tend to 
be expensive and very high-end, Zygote creates 
models and props for fun programs like Poser and 
Bryce, as well as covering the professional stuff. 


The Poser Forum 


www.poserforum.com 


An independent meeting place for fans of 
MetaCreations’ Poser program. The site has hundreds 
of free models, sets, props and image maps for existing 
models. More importantly, the world’s most 
experienced Poser modellers and animators meet here 
so it’s a great place to go if you're trying to take your 
mastery of the program to the next level. 


Corel Designer.com 


www.designer.com 


Corel’s answer to Creative Pro. It is hosted with the 
intention of assisting and inspiring Corel product 
users, although much of the advice can be adapted to 
other programs. Now that Corel has acquired Bryce, 
KPTand Painter, this site is very much a rival to 
Adobe.com in terms of value. 


art 


The ultimate magazine for creatives now has the ultimate 
Website. A wealth of information on Computer Arts and the 
Specials can be found here, along with brand new content. 


Adobe 


Of course it’s stylish, it's Adobe’s home. It's also a great place to 
get advice from other experienced users. 


Free Graphics 


www.freegraphics.com 


One of your key resources when building a Website will 
be the graphics you use. Most people acquire clip art 
libraries, but when you're getting started, or if you're 
looking for something specific, a site such as this, with 
links to hundreds of free graphics sites, might well be 
the perfect partner. 


3D Café 


www.3dcafe.com 


You can never have too many 3D models and this site is 
a great source of free and commercial ones. There’s 
also a chatroom, a modelling forum, links to other sites, 
a model exchange and even the chance to find jobs in 
the industry. This is a comprehensive site with 
something to offer anyone with an interest in 3D. 


Cooltext.com 


www.cooltext.com 


Why waste time designing your own logo when this 
handy site will do it for you? Choose from 21 basic 
styles and then customise your choice on-line to create 
logos that are anything but mundane. A great way for 
beginners to create custom graphics. 


Photo Secrets Stock and Royalty Free 
Photographs 


www.photosecrets.com/links.stock.html 


The difference between a professional-looking site and 
an amateur one is often the fact that the amateur one 
uses corny clip art. This Website provides links and 
searches to millions of royalty-free stock photos which 
you can use to improve your on-line image. 


Clip Art.com 


www.clipart.com 


Although free clip art may not be the way to add 
originality to your site, it’s certainly a good way to keep 
your costs down when you're getting started. This is 
another excellent links site that provides access to 
dozens of other sites containing millions of items of 
clip art. A lot of it might be cheesy but you never know 
just what you might find here. 


You'll believe a site can fly after you visit Spooky and the 
Bandit’s superb Shockwave site. 


Computer Graphics Resources 
www.nerdworld.com/users/dstein/nw405.html. 


Thanks to its poor design, it's tedious to browse through 
this site, but it hosts a huge list of computer graphics 
related resources, including individuals, companies, 
chatrooms, articles and more. There are also many 
related topics, such as animation, graphics hardware 
and virtual art, each of which also has their own 
extensive directories of contacts. 


Ryan Noguchi’s Computer Graphics 


Resources 
www.geocities.com/CapeCanaveral/4726/zcg.htm 


This site will never win any design awards, as it’s no 
more than a list of hyperlinks, organised by category. 
Nevertheless, this is one of the more comprehensive 
and better organised graphics-related links sites we've 
encountered. It’s particularly good for finding more 
esoteric things like graphics programming, texture 
libraries, hardware resources and so on. 


Optimising Web Graphics 
http://webreference.com/dev/graphics 

With so much dross on the Web, it’s critical that your 
site loads before people lose interest and go 
elsewhere. The best way to do that is to optimise your 
images so that they're as compact as possible. This 
superb site is a comprehensive guide to the process. 


The Graphic Vault 


www.graphicvault.com 


Although there are literally millions of free graphics out 
there, including every type of Website furniture, it’s still 
always nice to encounter a site that offers something a 
little bit classy. This site offers everything you could 
need to make stylish looking Web pages, including 
textures, buttons, dividers, backgrounds and more. 


Promote your site 


NetMechanic 


www.netmechanic.com 


Net Mechanic specialises in services to enhance your 
Website and get it noticed. The company also 
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specialises in products that monitor your site so you 
can see it as your potential viewers do and intercept 
problems before you lose visitors. 


Webmaster Resources 


www.webmaster-resources.com/freetools.shtml 


If you've created a Website that you want people to 
know about, this is a useful site. It includes a Metatag 
generator for search engine submission. It also 
provides a report on your Metatags. Once you're happy 
with the results, use Simple Submit to submit your site 
to over a dozen major search engines. 


Submit It 


http://free.submit-it.com/ 


With hundreds of search engines and millions of pages 
of on-line information, it can be a daunting task to 
advertise your Website. For a small fee, you can pay the 
professionals to do it for you. This site offers various 
levels of service as well as the ability to monitor how 
effectively your site is registered. 


Introduction To Search Engine Design 


www.searchenginewatch.com/webmasters/intro.htm! 


It’s not enough simply to register your site with search 
engines, you've got to understand how they work too. 
This superb site describes the way you can move your 
site up the ratings so that it comes up in the first page 
or two, every time someone searches. This is nota site 
you want your competitors to visit! Just hope they don't 
read Computer Arts... 


Promoting Your New Website 


www.bygpub.com/webpromotion 


Getting your new Website known and recognised is a 
task in itself. Don't try to figure it all out on your own 
though, this great site covers a multitude of topics 
including search engines, linking and so on. 


Hi welcome to the Web Graphics Tutorials 


Our tutorials are written by 
award-winning digital artist, and 
lished author, T. Michael 


ae published author, T. Michoe 
= oelg ee. =& Clark, Michael has written, and 


illustrated, online tutorlais for 
Photoshop, Corel DR. 

> D Pro, Ani 
general web graphics topics. 


You might aise be interested 
the rave~ we've written 


in 
about some of the graphics cohware, plug-ins and 
hardware that we use to create web graphics and web 
sites, We'll add to the reviews as time permits. 


Adobe's Photoshop. Some think It's overkill for producing web 
graphica. We couldn't live without it! Virtually alt of the 
images on this site, and any others we've created, are crested 
with Photoshop. 


Corel DRAW! Our main choice for creating the shapes we use 
in templates and interfaces. This powerful Hliustration program 
ts emazing! Find out how we perfor some of the digital tricks 
you see here at Grafx Design. 


Learn to use your favourite paint programs with Grafx Design's 
on-line tutorials. 
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Grafx Design 


www.grafx-design.com/tutorials,html 


There are loads of excellent tutorial sites offering 
general training in everything from graphics to HTML. 
However, this one is unusual because it provides 
tutorials on several specific programs, Photoshop, 
Corel Drawand Paint Shop Pro. There are also the 
more general tutorials covering such things as 
animated GIFs and the use of colour on the Web. 


Creating Killer Websites 


www.killersites.com/core.html#top 


Although this site is actually an advert for the second 
edition of the best-selling book Creating Killer 
Websites, the site includes a generous number of 
design tips taken from the book. Even if these don't 
tickle your fancy, this site is genuinely appealing to 
look at, unlike so many sites purporting to provide Web 
design services or tips. 


The DTP/HTML Tutorials 


www.dtp-aus.com 


When it comes to page layout, the basics of paper 
layout still apply to Web pages too. That’s why this site, 
which includes tutorials on both desktop publishing 
and HTML, offers something beyond the norm. You can 
learn the fundamentals of good page layout, then learn 
how to apply them to your site. 


The HTML Learning Centre 


www.w3nation.com/resources/learning/html/index.html 


HTML is constantly evolving, and this site offers 
tutorials that are bang up to date. We particularly liked 
the fact that it includes program-specific tutorials for 
Dreamweaver, which is one of the Web's most popular 
design tools, enabling you to avoid raw HTML 
altogether for much of the time. 


Art and the Zen of Websites 


www.tlc-systems.com/webtips.shtml 


There aren't many sites that combine philosophy with 
humour and practical advice, but this is one of them. 
Art and the Zen of Websites is a practical, pragmatic 
(yet not too lengthy) look at what makes a great Website 
and what doesn't, and why. It’s full of tips such as, 
‘Before you put a really dark background on your Web 
page, ask yourself this: why is it so much harder to drive 
at night than in the daytime?’ 


A Beginner’s Guide to HTML 


www.ncsa.uiuc.edu/general/internet/WWW/HIMLPrimer.ht 
ml 


Much as Web design programs are reducing the need 
for intimate HTML programming knowledge, to 
optimise your site and create the best site possible, 
you’ ll still need to resort to code occasionally. Here's 


Here's our favourite site, the Gallery at the Poser forum. There 
are some seriously talented artists out there! 


an excellent place to start learning, though more 
advanced designers will want to look elsewhere. 


Steele’s Docs and Tutorials 
www.geocities.com/SiliconValley/Park/9784/tut.html 


If you’re serious about graphics, you may actually want 
to write your own 3D graphics applications. This site is 
filled with tutorials on the science and techniques for 
coding every conceivable type of graphics engine, from 
games to professional rendering engines for ray tracing 
packages. Heavy going but fascinating stuff. 


How Stuff Works: Web Pages 


www.howstuffworks.com/Web-page.htm 


When you're just thinking of moving from Web 
spectator to Web creator, it can be very daunting. 
Here's a great site that puts the first steps and Web 
pages in general into language that even a supermodel 
could understand. It’s ideal for technophobes, children 
and technology-resistant older readers too. 


WebDeveloper.com 


www.webdeveloper.com 


There’s an amazing number of people out there who are 
freely providing vast amounts of design and 
programming knowledge. This site is the hub of a vast 
network of Web experts who are only too happy to 
provide you with tips and help on every conceivable 
aspects of Web design, from search engines to colour 
schemes and beyond. 


The Source for Java Technology 
http://java.sun.com/docs/index.html 


There are some first rate Java reference sites on the 
Web, but this is one of the more scholarly, catering for 
experienced Java coders. There’s comprehensive 
documentation covering the language, as well as 
detailed specifications explaining the real nitty-gritty. 
Before you buy any books on the language, check out 
this site. 


Hex Colour Chart 


www.sunyit.edu/~vankuyw/html-ref/color.html 


When you're determined to write in HTML, even simple 
things like specifying the colour of items on the page 


ae 


can be a problem if you don't have access to a full 
Hexadecimal colour catalogue. Now you do! Now if 
someone can tell me what Papaya Whip and Navajo 
White look like please... 


The Pixel Foundry 


www.pixelfoundry.com 


Where Photoshop's manuals stop, this site begins. It's 
chockful-o’ hot tips goodness! The site includes Kai's 
Photoshop Tips (you may remember him as the 
eclectic guru who created KPT). It also includes 
Photoshop Tips on-line magazine, and Tom’s Tips for 
Web designers. Before you fork out on an expensive 
reference book, go here first. 


Design Sphere 


www.dsphere.net 


Here’s another comprehensive site where you'll find 
the hours passing like seconds as you lose yourself in 
its tips, business directory, graphics FAQ and on-line 
magazines (e-zines). If you're looking for staff or a job, 
you'll be especially interested in the jobs section, the 
featured artist and folio. 


Web Reference 


www.webreference.com 


There are so many facets to designing a Website, 
including psychology, marketing, design, programming, 
funding, new technologies, security and more. This 
extensive site hosts FAQs, professionally-written 
articles, design tips, programming advice and more. 


The Complete Webmaster Resource 


www.biginfo.net 


So you've been programming Websites for a while now, 
and now you need to advance to the next level. This 
beautifully-designed site offers tutorials on everything 
from basic and advanced HTML, to DHTML and 
cascading style sheets. It’s a useful place to learn 
about advanced Web design. 


Scott's Tutorials Hotlist 
http://cires.colorado.edu/people/peckham.scott/tutors.html 


The Internet is a place of great extremes. There are lots 
of ignorant selfish people, but there are millions of 
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Not only is this an elegant site to look at and use, but The 
Complete Webmaster Resource is a very useful place to expand 
your design knowledge. 


altruistic folk giving freely of their time and knowledge 
for no reward. This site is a jumping off point to 
tutorials on everything from Java to Unix and beyond. 


3D Tutorials 


www.ruku.com/3d.html 


There's no end of material helping you to learn 
Photoshop, but 3D tutorials are much thinner on the 
ground, which is why this site is such a valuable 
resource. It covers a number of programs including Ray 
Dream, Infini-D, Poser, 3D Studio and Bryce. Some of 
the tutorials can be applied to other programs as well. 


3D Artists 
www.raph.com/Sdartists/artgallery 


This is a great site for anyone hoping to work in the 3D 
industry. It contains a gallery with over 640 pieces of 
work in it, and believe us,the standards are high. 
However, if you’re brave enough, you can submit your 
own work too. There are also tutorials, a job centre and 
interviews with successful 3D artists. 


3D Animation Workshop 


www.webreference.com/3d/indexa.htmL 


If 3D modelling is exciting but complicated, that’s 
nothing to the challenge or rewards that comes from 
animating. This site has a comprehensive and ongoing 
3D animation tutorial in which you can learn how to 
make the best of your 3D software. 


Multimedia 


Crescendo 
www.liveupdate.com 


Crescendo is one of the Web's most popular music 
players. Webmasters can use it replay MIDI files and 
MP3s. Users can download the player software and 
change the skin of the jukebox to suit their mood. This 
is where you'll find both the player and the 
Webmaster's hosting scripts. 


Real Networks 


www.real.com 


Video adds immediate impact to your site and when it 
comes to Internet streaming video, RealPlayeris one 


If you're serious about Web design, perhaps you should join one 
of the official bodies such as the AIP. 


There might be lots of free Web art on the net, but quality like 
this still shines above the rest. 


of the most popular decoders. At this site you can also 
buy the encoder software as well as tools to 
incorporate streaming video directly into your own 
Website. It’s not particularly easy though, so don't 
expect instant results. 


Add Sound to Your Website 


www.webdiner.com/Webadv/inter/audio.htm#basic 


Although it’s entirely possible to trigger wave files, play 
MIDIs, MP3s and other streaming audio formats, it’s 
surprising how few Web hosts know how to include 
such files, or understand the issues governing their 
use. This site provides a basic overview, with links to 
other related sites too. 


Webmonke' 
http://hotwired.lycos.com/Webmonkey/multimedia/audio_ 


mp3/index.html. 


Adding multimedia files such as audio, animation, 
video and even Flash files is a great way to create 
interest and generate a word-of-mouth buzz about 
your site, provided you don't go over the top. This site 
provides many intelligent and well-written essays on 
diverse Web-related subjects, and you're bound to find 
something of interest here. 


Official 
organisations 


The Association of Internet Professionals 
www.association.org 


The Association of Internet Professionals is the leading 
professional association of the Internet industry. It 
exists to unify, support and represent the global 
community of Internet professionals. The organisation 
also serves as a forum for the ideas, people and issues 
shaping the future of the Internet industry — well, as 
much as anyone is, anyway. 


The International Webmaster’s 
Association 


www.iwanet.org 


If you’re serious about working as a Web designer, 
membership of this organisation is recognised and 
valued the world over. With chapters all over the world, 
this organisation provides education and fosters 
advancement in the field of Web design. FEES 
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* Excludes phone calls charged at local BT rate. Technical Support charged at premium rate (50p per minute). 


First create your website. 


Then make sure people keep coming back. 


How many free email accounts 
have you signed up for on other 
people's web pages? 


Why do you do it? You get a 
free email address to read your 
messages wherever you log 
onto the internet. 


Why do they do it? Every time 
you log in you're looking at 
their website, their adverts 
and their name. 


If only your website could do that. 
It can. 
yourcustomer@yourwebsite.com 


* Increases customer loyalty 

* Lets your customers 
distribute your brand for you 

* Simplifies your market 
research and mailshots 


Let us handle the technology 
while your brand is the only one 
your customers see. . 


Coconut is a British software 
company providing fully 
customisable and integrated 
web-based email solutions to 
all size of business. 


For less than you'd think. 


Telephone: 01534 729040 
Email: sales@coconut.co.uk 


www.coconut.co.uk 


